Bootstrap options

Choose how you want to initialise vue-gtag in your application

By default, the plugin will create a gtag instance of the library in the window scope and download the library for you, but often users have different use cases, so here we will take a look at them.

Disable script loading

import { createApp } from "vue";
import VueGtag from "vue-gtag";

createApp(App).use(VueGtag, {
  disableScriptLoad: true,
  config: { 
    id: "GA_MEASUREMENT_ID",
  },
}).mount("#app");

Bootstrap later

It is possible to set up the entire plugin options but to bootstrap it later on whenever the user decides to. This could also be useful for any GDPR proof projects.

import { createApp } from "vue";
import VueGtag from "vue-gtag";

createApp(App).use(VueGtag, {
  bootstrap: false,
  config: { 
    id: "GA_MEASUREMENT_ID",
  },
}).mount("#app");

Later on, in any places of your application, in any moment, you can simply import the bootstrap method in your code and run it

import { bootstrap } from 'vue-gtag'

export default {
  name: 'MyComponent',

  methods: {
    enablePlugin () {
      bootstrap().then((gtag) => {
        // all done!
      })
    }
  }
}

the bootstrap method will return a promise that will be resolved when the script has been loaded completely.

The bootstrap promise returns the actual gtag api object, which is not what it's injected inside the Vuejs scope by the plugin, but the pure and simple gtag library.

To start using vue-gtag after bootstrap successful response, you can simply access the library from the component scope.

Set options

Normally you would add all your options inside the global object when installing the plugin, but it is also possible to set those options later in conjunction with calling the bootstrap method.

Start always but setting the bootstrap option to false

import { createApp } from "vue";
import VueGtag from "vue-gtag";

createApp(App).use(VueGtag, {
  bootstrap: false,
}).mount("#app");

then just go to a component in another place in your code and type something like this

import { setOptions, bootstrap } from 'vue-gtag'

export default {
  name: 'MyComponent',

  methods: {
    enablePlugin () {
      setOptions({
        config: { id: 'UA-123456-7' }
      })

      bootstrap().then((gtag) => {
        // all done!
      })
    }
  }
}

Make sure to set your options before calling the bootstrap method or your new options won't be saved