[Solution] Add External Script Tags in Vue JS component

This article is about ways to add external script tags in the Vue JS component.

Usually, when we add scripts to our Vue application globally, we add the <script>tag in index.html in our public directory and the script will run in all the components.

However, sometimes some scripts are large and if you need to run on a specific page only, then it is recommended to add it locally.

For Nuxt JS, you can check How To Add External JS Script In Nuxt Component

So, if we need to run a script locally on a page, we have to add the file in that particular component. And Vue doesn’t have a specific way to add scripts locally on a specific page/component.

So here are some of the ways which I have found googling about the problem for myself.

Hope it will help you to solve your issue too.

Solution 1: Add script tag inside your Vue component template.

This is the easy fix I have found. Just add the script into the component template. But don’t forget to add, type=”application/javascript” to the script tag otherwise it will show an error during the build.

<script type="application/javascript" src="https://cdn.jsdelivr.net/vue.js"></script>

However, if you have added document.write() in your script tag, then this method will not work. And you will get an error as “Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.”

Solution 2 : Add script in mounted() method

This is another way to add an external script to a component. It is very simple and effective and all we have to do is to add the script in mounted() life-cycle hook in Vue.

Here is an example:

export default {
  mounted() {
    let Script = document.createElement("script");
    Script.setAttribute("src", "https://cdn.jsdelivr.net/npm/vue/dist/vue.js");
    document.head.appendChild(Script);
  }
};

Note: It’s better not to use created() because at this stage DOM is not mounted and you will not be able to do DOM manipulations.

Solution 3: Using Vue-Meta module

Vue-meta is a vue module that you can install in your application to add metadata and script to Vue component. This makes it easy to add any script tags to the head tag in individual Vue components.

Syntax Example:

export default {
  {
    metaInfo: {
      script: [
        { src: 'https://cdn.jsdelivr.net/vue.js', async: true, defer: true }
      ],
    }
  }
}

Solution 4: using vue-head module

vue-head is also a module just like vue-meta, by adding it to your Vue application, you will be able to set metadata in your head tag its individual pages.

Read more about it : vue-head documentation

Code example:

export default { 
  head: {
      script: [
        { type: 'text/javascript', src: 'cdn/to/script.js', async: true, body: true}, // Insert in body
        // with shorthand
        { t: 'application/ld+json', i: '{ "@context": "http://schema.org" }' },
        // ...
      ],
    }
}

These are some of the ways that will help you to add external JS script locally into Vue component.

Include External CSS File In Vue.Js Component

How To Add Dynamic HTML Attributes In VueJS ?

Solution 1: Add script tag inside your Vue component template.

Solution 2 : Add script in mounted() method

Solution 3: Using Vue-Meta module

Solution 4: using vue-head module

Related Posts