vue-plugin-load-script

A Vue plugin for injecting remote scripts.

Compatible with Vue 3.

For Vue 2, see the master branch.

Install

1# npm
2npm install --save vue-plugin-load-script@^2.x.x

1# yarn
2yarn add vue-plugin-load-script@^2.x.x

If you're using the Options API:

1  // main.js
2  import { createApp } from "vue";
3  import LoadScript from "vue-plugin-load-script";
4
5  const app = createApp(App);
6  app.use(LoadScript);
7
8  app.mount("#app");

Use

1  // Composition API
2  import { loadScript } from "vue-plugin-load-script";
3  loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
4    .then(() => {
5      // Script is loaded, do something
6    })
7    .catch(() => {
8      // Failed to fetch script
9    });
10
11  // Options API
12  this.$loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
13    .then(() => {
14      // Script is loaded, do something
15    })
16    .catch(() => {
17      // Failed to fetch script
18    });

If you'd like to remove (unload) the script at any point, then call the companion method unloadScript / this.$unloadScript with the same URL.

1  // Composition API
2  import { unloadScript } from "vue-plugin-load-script";
3  unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
4    .then(() => {
5      // Script was unloaded successfully
6    })
7    .catch(() => {
8      // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL
9    });
10
11  // Options API
12  this.$unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
13    .then(() => {
14      // Script was unloaded successfully
15    })
16    .catch(() => {
17      // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL
18    });

In most situations, you can just call unloadScript / this.$unloadScript and ignore the returned promise.