How to load an external script in Vue component?

In some cases, you might want to include 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.

For our example, there is no difference if you are inserting a script from a separate CDN, or you are using a script that is located in the project folder. Both of them works just fine. And with the latter approach, it’s a bad idea to include the whole script in the document, so it will not be discussed.

So how to load an external script in Vue component?

You can’t just simply include the script inside a <template> in your component. When you will try doing this:

<template>
  <div id="app">
  	<script src="https://example.com"></script>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

You will get an error:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

And this error is pretty self-describing – templates are not intended for including scripts. You just can’t do this, so better find another way.

A quick way how you inject the script is to do this directly in a component by using mounted function. In case you are not familiar with mounted, the function executes the code before the page is loaded. So in our case, the script will be added before the page will be loaded. Let’s just say we have a newly created Vue project and we add a mounted function to this:

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  mounted() {
    let externalScript = document.createElement('script')
    externalScript.setAttribute('src', 'https://www.example-of-external-script.com/script.js')
    document.head.appendChild(externalScript)
  },
}
</script>

What’s happening inside the mounted function? Nothing fancy: a variable with the name of externalScript is being defined and a script element is assigned to it. Then the src attribute with a link of a script is being assigned, and lastly, the element is added as a child of an HTML head. And the code results in an outcome we want:

Do you really need to inject the external script in the Vue component?

The answer to this question is that it depends on your needs. Sometimes (and probably most often) you might want to have an external JavaScript library for the whole page. Yet the resource might not be used by the whole page (might be that only a specific function of the page uses it).

That’s completely up to you if you need to load an external JavaScript script in the Vue component, or having it in a whole application suit your needs.

However, I am referring to the JavaScript scripts that are loaded from external CDNs. So, if you are trying to implement a well-known library, there is a chance that you can get it as an npm package.

Pro tip: if you don’t need to have a script exclusively for one component, you can include it for the whole application.

Let’s just say you want to have a script available in the component. In my other tutorial, I explained how to add Bulma CSS to the application. I am not going into the details here as it is not the topic, but I will recite a simple example. So when you install an npm package with Vue CLI, or Vue UI if you want to use it, the only thing you need to add something similar like this inside the <style> element:

@import “~bulma/css/bulma.css”;

And speaking about this specific example, you will have the Bulma script injected into the HTML document. Even though this is a CSS file, the same works with the script – just make sure you are adding this inside the <script> element in your component. I used this CSS file only as an example.

However, the other components that are not related to this component, might not see it. But here is a solution for this. Put this inside the main.js file:

import ‘buefy/dist/buefy.css’

And you will have it in the whole application. Again, that’s just an example, I referred to this as I’ve dealt with this in the past. But the mechanics are the same with any JS script.

The conclusion: find out if the JS script is available as an npm package. If so, refer to its installation instructions and you might not need the solution given in this article.

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