Awesome

vue-plugin-load-script

A plugin for injecting remote scripts.

Compatible with Vue 2.

Install

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

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

Use

With Vue

  // In main.js
  import LoadScript from 'vue-plugin-load-script';

  Vue.use(LoadScript);

With Nuxt

// @/plugins/load-script.js
import Vue from 'vue';
import LoadScript from 'vue-plugin-load-script';
Vue.use(LoadScript);

// @/nuxt.config.js
//...
  plugins: [
    { src: '@/plugins/load-script.js' },
  ],
  //...
  build: {
    transpile: ['vue-plugin-load-script'],
  },
//...

The build.transpile option is required since this plugin is exported as an ES6 module.

Usage

  // As a global method
  Vue.loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
    .then(() => {
      // Script is loaded, do something
    })
    .catch(() => {
      // Failed to fetch script
    });

  // As an instance method inside a component
  this.$loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
    .then(() => {
      // Script is loaded, do something
    })
    .catch(() => {
      // Failed to fetch script
    });

Once loaded, the script can be accessed by their usual name in the global scope, as if the script were included in the page's <head>.

If you are using a linter to check your code, it may warn on an undefined variable. You will need to instruct your linter to ignore this variable or function. See here for ESLint instructions. If you are unable to resolve this in your linter, try prefixing the loaded library's variable/function name with window..

:zap: New in 1.2! If you'd like to remove (unload) the script at any point, then call the companion method $unloadScript with the same URL.

  // As a global method
  Vue.unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
    .then(() => {
      // Script was unloaded successfully
    })
    .catch(() => {
      // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL
    });

  // As an instance method inside a component
  this.$unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY")
    .then(() => {
      // Script was unloaded successfully
    })
    .catch(() => {
      // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL
    });

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