vue-script-insert

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

<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 <style> 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