How to add an external JS scripts to VueJS Components - TechvBlogs

How to add an external JS scripts to VueJS Components

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


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
 

1 year ago

TechvBlogs - Google News

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.

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 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 this blog.

Read Also: SPA Authentication using Laravel 9 Sanctum, Vue 3, and Vite

If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.

Comments (2)

jz jz 2 months ago

loading third-party scripts this way can be an optimal solution, if the script is loaded conditionally/dynamically, and is cached appropriately.

that said, adding the "type" attribute doesn't seem to work any longer (in vue3 / vite) - using the good old document.createElement('script') method still works. I wonder if there is a more idiomatic way to do this in vue3/vite though?

Filipe Costa Filipe Costa 1 year ago

Adding type="application/javascript" to the script tag was the solution that helped me. Thanks =)

Comment


Note: All Input Fields are required.