How to add external script to Vue.js component

You might encounter scenarios where you will be given a JavaScript CDN link and you want to include it in your Vue app. In this article we will see different ways in which we can do the same.

By adding the script in index.html

Let's say you want to include moment.js in you app. Below is the CDN URL:

1https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js

Now go to index.html and add the script.

index.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Vite + Vue</title>
8  </head>
9  <body>
10    <div id="app"></div>
11    <script type="module" src="/src/main.js"></script>
12    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
13  </body>
14</html>

In you component, refer moment inside the onMounted method

1<script setup>
2import { ref, onMounted } from "vue";
3
4const currentDate = ref("");
5
6onMounted(() => {
7  currentDate.value = moment().format("MMMM D, YYYY");
8});
9</script>
10
11<template>
12  <p>Today's date: {{ currentDate }}</p>
13</template>

Now you should be able to see the formatted date:

By loading the script the component

If you don't want to load the script for the entire application and want to load it in a particular component, then you can use the following code:

1<template>
2  <div>
3    <p>Current date: {{ currentDate }}</p>
4  </div>
5</template>
6
7<script>
8export default {
9  data() {
10    return {
11      currentDate: "",
12    };
13  },
14  mounted() {
15    // Load Moment.js
16    const script = document.createElement("script");
17    script.src =
18      "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js";
19    script.onload = () => {
20      // Once Moment.js is loaded, set the current date
21      this.currentDate = moment().format("MMMM D, YYYY");
22    };
23    document.head.appendChild(script);
24  },
25};
26</script>

Here we use the mounted lifecycle hook to load the script programmatically.

Using npm packages

Most of the libraries provide npm packages and you can install it using npm i <package-name> command.

You can then use it as shown below:

1<template>
2  <div>
3    <h1>Using External Library via npm</h1>
4  </div>
5</template>
6
7<script>
8// Import the library after installation
9import externalLibrary from 'external-library';
10
11export default {
12  mounted() {
13    // Use the library in your component
14    externalLibrary.someFunction();
15  }
16}
17</script>

Using Vue Plugins

If your library is published as a vue plugin, then install it using:

1npm install vue-external-plugin # replace it with you plugin name

Now, import it in main.js:

1import Vue from 'vue';
2import ExternalPlugin from 'vue-external-plugin';
3
4Vue.use(ExternalPlugin);

And finally, use it in your vue component:

1<template>
2  <div>
3    <h1>Using External Plugin</h1>
4  </div>
5</template>
6
7<script>
8export default {
9  mounted() {
10    this.$externalPluginFunction();
11  }
12}
13</script>

Do follow me on twitter where I post developer insights more often!

How to add external script to Vue.js component

Table of Contents

By adding the script in index.html

By loading the script the component

Using npm packages

Using Vue Plugins

Leave a Comment

Tools