A Vue plugin for injecting remote scripts

vue-plugin-load-script

A Vue 2 plugin for injecting remote scripts.

See the vue3 branch for Vue 3 support.

Install

# npm
npm install --save vue-plugin-load-script

# yarn
yarn add vue-plugin-load-script

Use

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

  Vue.use(LoadScript);

  // 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
    });

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

Download Details:

Author: tserkov

Source Code: https://github.com/tserkov/vue-plugin-load-script

#vuejs #vue #javascript