vue-script-insert v0.4.4

vue-script-insert

Module to dynamically load external js into spa

Setup

$ npm install vue-script-insert

Usage

Vue.js

<script>
import {VueScriptInsert} from 'vue-script-insert'

export default {
  components: {
    VueScriptInsert
  },
  ・・・
}
</script>

Nuxt.js

//plugins/vue-script-insert.js

import Vue from 'vue'
import {VueScriptInsert} from 'vue-script-insert/src/installer.js'

Vue.use(VueScriptInsert)

//nuxt.config.js

export default {
    plugins: [
        'plugins/vue-script-insert'
    ],
}

Document

It works by setting prop to the tag. The tag containing the script is passed to url, the id attribute of the html tag is passed to id, and the css style is passed to layout.

<VueScriptInsert :url="adv_url" :id="adv_id" :layout="adv_layout"></VueScriptInsert>

Component props

Usage examples

//Vue

<template>
    <VueScriptInsert :url="adv_url" :id="adv_id" :layout="adv_layout"></VueScriptInsert>
</template>

<script>
import {VueScriptInsert} from 'vue-script-insert'

export default {
    components: {
        VueScriptInsert
    },
    data() {
        return {
            adv_url:'tag',
            adv_id:'id',
            adv_layout:{
                width: "1080px",
                height :"110px",
                },
            }
        }
    }
</script>

//Nuxt

<template>
    <VueScriptInsert :url="adv_url" :id="adv_id" :layout="adv_layout"></VueScriptInsert>
</template>

<script>
export default {
  data() {
    return {
      adv_url:'tag',
      adv_id:'id',
      adv_layout:{
          width: "1080px",
          height :"110px",
        },
    }
  }
}
</script>

Detailed layout

Detailed layout can be specified by using ids in tags. ※ At this point, you need to specify the layout of the iframe.

<style>
    #id iframe{
        ・・・
    }
</style>

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/tf0101/vue-script-insert.

License

MIT License