Inserting Scripts in Vue

How to Properly Insert <script> Code in Vue (Including Ad Code Examples)

In real-world development, we often need to integrate third-party services such as advertising platforms, analytics tools, or customer support widgets. These services usually provide a block of code that includes <script> tags.

However, if you try to place <script> tags directly inside a Vue template (<template>), they will not work—and may even cause errors.

This article explains why <script> tags cannot be directly used inside Vue templates, and how to correctly inject scripts dynamically, with a ready-to-use example (using ad code as a case study).

---

1. Why You Can’t Write <script> Directly in a Vue Template

Vue Single File Components (SFC) have a clear structure:

• <template>: markup / structure
• <script>: logic
• <style>: styles

Placing <script> tags inside <template> causes several problems:

1. Vue treats <script> tags as plain text or strips them out
2. It breaks Vue’s compilation process and may throw errors
3. Third-party scripts (ads, analytics, trackers) will not execute at all

Therefore, to make external scripts work properly, they must be dynamically injected using DOM APIs during the component lifecycle.

---

2. Incorrect Example: Pasting Ad Code Directly (This Will NOT Work)

Suppose an ad network provides the following code:

<script type="text/javascript">
  atOptions = {
    'key' : '1523b7ddb936e560aadef64a851d500c',
    'format' : 'iframe',
    'height' : 250,
    'width' : 300,
    'params' : {}
  };
</script>
<script
  type="text/javascript"
  src="//www.highperformanceformat.com/1523b7ddb936e560aadef64a851d500c/invoke.js">
</script>

If you paste this code directly into a Vue <template>, the advertisement will never render.

---

3. The Correct Approach: Dynamically Inject Scripts in Vue

The core idea is simple:

1. Place a container element in the template (e.g. <div id="de_v"></div>)
2. Use the onMounted (or mounted) lifecycle hook
3. Create <script> elements via JavaScript
4. Append them to the DOM

---

4. Complete Example (Vue 3 + <script setup>)

Assume the ad should be rendered inside a container with the ID "de_v".

Template Section

<template>
  <div id="de_v"></div>
</template>

Script Section

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  const targetDiv = document.getElementById("de_v");
  if (!targetDiv) return;

  // Create the first script (ad configuration)
  const script1 = document.createElement("script");
  script1.type = "text/javascript";
  script1.innerHTML = `
    atOptions = {
      'key' : '1523b7ddb936e560aadef64a851d500c',
      'format' : 'iframe',
      'height' : 250,
      'width' : 300,
      'params' : {}
    };
  `;

  // Create the second script (external ad script)
  const script2 = document.createElement("script");
  script2.type = "text/javascript";
  script2.src =
    "//www.highperformanceformat.com/1523b7ddb936e560aadef64a851d500c/invoke.js";

  // Append scripts to the container
  targetDiv.appendChild(script1);
  targetDiv.appendChild(script2);
});
</script>

---

5. Common Issues and Notes

1. Will the script be injected multiple times?

If the component is mounted and unmounted repeatedly, the scripts may be injected multiple times.

Solutions:

• Check whether the script already exists before inserting
• Or remove the scripts in onUnmounted

---

2. How to Handle Multiple Ad Slots?

Use different container IDs for each ad slot, for example:

<div id="ad1"></div>
<div id="ad2"></div>

Then inject scripts into the corresponding container.

---

3. What About SSR Frameworks (Nuxt)?

On the server side, document is not available.

You must run the script injection code on the client side only:

onMounted(() => { ... })

Otherwise, you will encounter:

document is not defined

---

6. Summary

• You cannot directly place <script> tags inside Vue templates
• The correct solution is to dynamically create and inject scripts during the component lifecycle
• Using appendChild() ensures third-party scripts execute properly
• This approach works for ads, analytics, tracking pixels, and external SDKs

By following the method described above, third-party scripts will run correctly in Vue-based applications.