How to add an external JS scripts to VueJS Components

In some cases, you might want to include an additional JavaScript script into your Vue app. There might be any reason for this – you want to apply Material design for a specific component, want to have Kendo UI, or anything else. Do you really need to inject an external script in the Vue component, will be discussed later, but we are here today for one reason – to find out how to load an external script in Vue.js.

There are two approaches for injecting the JavaScript scripts:

• You load it from an external source – a CDN or from a separate file.
• You inject the script inside the HTML element.

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.

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.

In this article, we’ll look at how to add external JavaScript scripts to Vue.js components.

How to add external JavaScript scripts to Vue.js components?

To add external JavaScript scripts to Vue.js components, we can add a script element with document.createElement.

For instance, we write

export default {
  //...
  mounted() {
    const recaptchaScript = document.createElement("script");
    recaptchaScript.setAttribute(
      "src",
      "https://www.google.com/recaptcha/api.js"
    );
    document.head.appendChild(recaptchaScript);
  },
  //...
};

Add a 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.”

Using Vue-Meta module

Vue-meta is a vue module that you can install in your application to add metadata and script to the 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 }
      ],
    }
  }
}

Using a 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.

Code example:

export default { 
  head: {
      script: [
        { type: 'text/javascript', src: 'cdn/to/script.js', async: true, body: true}, // Insert in body
        // with shorthand - How to add an external JS scripts to VueJS Components
        { 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 the Vue component.

When you should prefer having script globally vs having it in a component

And to the end, when loading an external script in the Vue component globally is not a good solution:

• Performance is important for you and you want to optimize the application as much as possible. Having the script loaded on every page is not efficient, especially if the external resource is used only by a part of the functionality.

Thank you for reading How to add an external JS scripts to VueJS Components blog, Hope this code and post will helped you for implement How to add an external JS scripts to VueJS Components. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs