Inspired by vue-plugin-load-script

This project is inspired by vue-plugin-load-script, add some new features on it,if you don't need the new features you could use vue-plugin-load-script.

Install

npm install vue-load-script-plus --save

API list

• loadScript
• unBlockloadAllScripts
• unloadScript
• loadAfterUnloadScript

1.6.6 version new feature

npm install vue-load-script-plus@1.6.6 -S

1. add the third param which is a boolean value to load script before body tag closes. these functions add the third param: $loadScript,$unloadScript,loadAfterUnloadScript
2. add a new function that can unblockly load script array with attributes,also they can be load in head or body

1const arr = [
2    {
3      script: 'https://cdn.bootcss.com/jquery/3.3.1/core.js',
4      beforeBody: true, // load before body tag closes
5      attrObject: {
6        'data-appid': 'APPID',
7        'data-redirecturi': 'REDIRECTURI',
8        'charset': 'utf-8'
9      } 
10    },// first script loaded
11    {
12      script: 'https://cdn.bootcss.com/jquery/3.3.1/core.js',
13      beforeBody: false,  // load in head tag
14      attrObject: {
15        'data-appid': 'APPID',
16        'data-redirecturi': 'REDIRECTURI',
17        'charset': 'utf-8'
18      } 
19    } // then second script loaded
20  ]
21this.$unBlockloadAllScriptsAndAttr(arr)
22    .then(() => {
23      // after all loaded, do your logic  
24    })
25    .catch(() => {
26      // after all loaded, do your logic
27    })

Usage

1// main.js
2import Vue from 'vue'
3import VueLoadScript from 'vue-load-script-plus'
4Vue.use(VueLoadScript)

$loadScript with addtional feature

1// someComponent.vue
2<template>
3<button @click="removeScriptTag"></button>
4</template>
5<script>
6export default {
7  mounted () {
8    // load your script tag, if you 
9    // don't need to set attributes on script tag.
10    // you can stop passing the second parameter
11    this.$loadScript(
12      'http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js',
13      {
14        'data-appid': 'APPID',
15        'data-redirecturi': 'REDIRECTURI',
16        'charset': 'utf-8'
17      }
18    ).then(() => {
19      // do your logic
20    })
21  },
22  methods: {
23    // remove script tag from head
24    removeScriptTag () {
25      this.$unloadScript('http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js')
26    }
27  }
28}
29</script>
30// generated script tag would be
31// <script 
32    type="text/javascript"
33    async="" 
34    src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" 
35    data-appid="APPID" 
36    data-redirecturi="REDIRECTURI" 
37    charset="utf-8"></script>

New Feature

$unBlockloadAllScripts

It will load an array of scripts, all of the scripts will be loaded,no matter some of them was 404 or 301

1
2const arr = [
3  'https://cdn.bootcss.com/jquery/3.3.1/core.js', // first script loaded
4  'https://cdn.bootcss.com/jquery/3.3.1/jquery.js' // then second script loaded
5  ]
6this.$unBlockloadAllScripts(arr)
7    .then(() => {
8      // after all loaded, do your logic  
9    })
10    .catch(() => {
11      // after all loaded, do your logic
12    })

I suggest you to write your logic both in the then and catch callback, to ensure that your own logic are excuted. The script tags will be loaded in the order of its order in the array.

loadAfterUnloadScript

It will load script after it was unloaded

1    this.$loadAfterUnloadScript(
2      'http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js',
3      {
4        'data-appid': 'APPID',
5        'data-redirecturi': 'REDIRECTURI',
6        'charset': 'utf-8'
7      }
8    ).then(() => {
9      // do your logic
10    })