Basic migration guide

from v1 to v2

Version 2 of vue-gtag requires Vue 3 to be installed.

There are some key differences on the installation process: what are the options and how to connect my VueRouter instance.

The type of options are mostly the same, but they have different names, to try to be as clear as possible. You can check them all out here

Basic installation migration

The plugin installation in version 1 looks like this

import Vue from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";

Vue.use(VueGtag, {
  config: { id: "GA_MEASUREMENT_ID" }
});

new Vue({
  render: h => h(App)
}).$mount("#app");

this will be the new installation with version 2 and Vue 3

import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag-next";

const app = createApp(App);

app.use(VueGtag, {
  property: {
    id: "GA_MEASUREMENT_ID"
  }
});

app.mount("#app");

Connect your VueRouter

The router tracking installation has been moved outside the main plugin install object to have a more clean and clear approach.

The router installation in version 1 looks like this

import Vue from "vue";
import VueRouter from 'vue-router';
import App from "./App.vue";
import VueGtag from "vue-gtag";

const router = new VueRouter({
  routes: [
    { name: 'Home', path: '/' },
    { name: 'About', path: '/about' },
  ]
});

Vue.use(VueGtag, {
  config: { id: "UA-1234567-1" }
}, router);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

in version 2 with Vue 3 will be like this

// main.js 
import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag-next";
import router from './router.js';

const app = createApp(App);

app.use(router)

app.use(VueGtag, {
  property: {
    id: "UA-123456-7"
  }
});

app.mount("#app");

// router.js 
import { createRouter } from "vue-router";
import { trackRouter } from "vue-gtag-next";

import Home from "../views/Home.vue";
import About from "../views/About.vue"


const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: About
  }
];

const router = createRouter({
  routes
});

trackRouter(router); <-----

export default router;

you can look here for the options you can now pass to this method