# vue-script-insert

> Module to dynamically load external js into spa

Latest version **0.4.4** (published 2022-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-script-insert
pnpm add vue-script-insert
yarn add vue-script-insert
bun add vue-script-insert
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.4 |
| Published | 2022-04-22 |
| First published | 2021-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 459.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | tf0101 |
| Maintainers | tf0101 |
| Keywords | Vue, Vue.js, Nuxt, Nuxt.js, SPA script insert |

## Links

- npm: https://www.npmjs.com/package/vue-script-insert
- Repository: https://github.com/tf0101/vue-script-insert
- Homepage: https://github.com/tf0101/vue-script-insert#readme
- Issues: https://github.com/tf0101/vue-script-insert/issues
- npm.io page: https://npm.io/package/vue-script-insert

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 0.4.4 (latest) — 2022-04-22
- 0.4.3 — 2022-04-22
- 0.4.2 — 2022-04-22
- 0.4.0 — 2022-04-22
- 0.3.9 — 2022-04-22
- 0.3.8 — 2021-06-30
- 0.3.7 — 2021-06-30
- 0.3.6 — 2021-06-30
- 0.3.5 — 2021-06-25
- 0.3.4 — 2021-06-25
- 0.3.3 — 2021-06-23
- 0.3.2 — 2021-06-23
- 0.3.1 — 2021-06-23
- 0.3.0 — 2021-06-23
- 0.2.9 — 2021-06-23
- … 19 more at https://npm.io/package/vue-script-insert/versions

## README

# vue-script-insert
Module to dynamically load external js into spa

## Setup
```
$ npm install vue-script-insert
```

## Usage

### Vue.js
```Vue
<script>
import {VueScriptInsert} from 'vue-script-insert'

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

### Nuxt.js

```js
//plugins/vue-script-insert.js

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

Vue.use(VueScriptInsert)
```

```js
//nuxt.config.js

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

## Document
It works by setting prop to the <VueScriptInsert> 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.

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

### Component props
| prop | type | description |
|:---|:---|:---|
|url |String |Tag strings containing <script>. |
|id |String |ID (unique identifier) for an element in the id attribute of an HTML tag. |
|layout |Object |CSS styles, passed as an associative array |

### Usage examples

```Vue
//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>
```

```Vue
//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.

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

## Contributing
Bug reports and pull requests are welcome on GitHub at [https://github.com/tf0101/vue-script-insert](https://github.com/tf0101/vue-script-insert).

## License
[MIT License](https://github.com/tf0101/vue-script-insert/blob/main/LICENSE.txt)

---
_Source: https://npm.io/package/vue-script-insert · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._