npm:vue-dom-injector

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

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

vue-dom-injector

Usage no npm install needed!