vue-dom-injector
v1.0.16
Published
Inject and remove HTML tags (script, style, etc) into DOM in your Vue2/Vue3 projects
Downloads
18
Maintainers
Readme
Introduction
Vue DOM Injector is a library to inject and remove HTML tags (script, style, etc) into DOM on your Vue projects.
Useful for injecting third party scripts such as Google Tag Manager, Google Analytics, Clarity, Linkedin insights, etc. when the user has accepted the cookie policies and to comply with the data protection law and remove them when user disable the cookie policies.
Or simply add a new HTML tag in the DOM of our Vue application.
Warning: If a <script> is inserted, the javascript code inside it will be executed. Inject only scripts that you trust because they will be executed and could contain malicious code
Demo
https://vue-dom-injector.stackblitz.io
You can see the demo code here
Install
npm install vue-dom-injector --save
or
yarn add vue-dom-injector
Add as a plugin to Vue
You can add VueDOMInjector inside main.js file or as a standalone plugin in your /plugins folder
// Vue 2
import Vue from 'vue';
import VueDOMInjector from 'vue-dom-injector';
Vue.use(VueDOMInjector);
// Or you can specify any other name
Vue.use(VueDOMInjector, {
name: 'myDOMInjector' // Then you can use like: this.$myDOMInjector...
});
// Vue 3
import { createApp } from 'vue'
import VueDOMInjector from 'vue-dom-injector'
import App from './App.vue'
createApp(App)
.use(VueDOMInjector)
.mount('#app')
Usage
WARNING! Be careful when adding the script in string format, to ensure it works well remember to escape the closing "/" tags and using back-ticks (`). For example: <\/script> instance of <\script>
Inject Script Node
this.$domInjector.injectNode(`<script>window.alert("Hi! Injected code alert")<\/script>`)
this.$domInjector.injectNode(`<script>window.alert("Hi! Injected code alert")<\/script>`, {
parentTag: 'body', // 'head' by default
insertAsLastTag: 'false', // 'true' by default
extraAttrs: { // {} by default
id: 'myScript',
async: true
}
})
Inject Script Node (A bit more complex with Google Analytics)
const ANALYTICS_SCRIPT_ONE = `
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1"><\/script>
`;
const ANALYTICS_SCRIPT_SECOND = `
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123456789-1');
<\/script>
`;
this.$domInjector.injectNode(ANALYTICS_SCRIPT_ONE, {
parentTag: 'head',
insertAsLastTag: true,
extraAttrs: {
id: 'myAnalyticsScript',
type: 'text/javascript'
}
}).then(() => alert('Injected first analytics script!'));
this.$domInjector.injectNode(ANALYTICS_SCRIPT_SECOND, {
parentTag: 'head',
insertAsLastTag: true,
extraAttrs: {
id: 'myAnalyticsScript2',
type: 'text/javascript'
}
}).then(() => alert('Injected second analytics script!'));
Inject Style Node
this.$domInjector.injectNode(`
<style>
h1 {
color: red;
}
</style>
`)
Remove Node
You can use any css selectors
this.$domInjector.removeNode('#myScript')
this.$domInjector.removeNode('input[type="text"]')
this.$domInjector.removeAllNodes('script[src*="googleadservices"]')
Props
| Method | Prop | Description | Type | Default |
| ------------------- | ------------------- | ---------------------------------------------------------------------- | ----------------------------------------------- | -------------- |
| injectNode | - | new tag in string format (required) | string
| - |
| | parentTag | name of the parent tag into which the new node will be injected | string
| 'head' |
| | insertAsLastTag | if true, new node will be injected at the end, if false, will be first | boolean
| true |
| | extraAtts | object with any extra attrs (id, style, etc.) | object
| {} |
| removeNode | - | css selector for match and remove single tag (required) | string
| - |
| removeAllNodes | - | css selector for match and remove all tags (required) | string
| - |
License
MIT Licensed | Copyright © 2021-present srubio131