vue-gtag error: "maximum call stack size exceeded"

Question

I have a Vue application written in Typescript, for which tracking via Google Analytics needs custom dimensions. The "vue-gtag" package seemed to be the best way to go, so I installed it. I read the documentation, and tried setting it up the same way.

In my main, it is included in Vue like this:

Vue.use(VueGtag, {
  config: { id: 'GTM-XXXXXXX' },
  router,
});

My router is set up like this:

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: '',
    component: LoggedInLayout,
    meta: {
      requiresAuth: true,
    },
    children: [
      // Children that require auth
      {
        path: '',
        redirect: '/dashboard',
      },
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard,
      },
      {
        path: '/settings',
        name: 'User Settings',
        component: UserSettings,
        meta: { title: 'Custom page title' },
      },
      {
        path: '/search/:page',
        name: 'Search',
        component: Search,
        props: (route) => ({
          ...route.params,
        }),
        meta: { title: 'Custom page title' },
      },
      // More like this
    ],
  },
  {
    path: '',
    component: DefaultLayout,
    meta: {
      requiresAuth: false,
    },
    children: [
      // Children that don't require auth
      {
        path: '',
        redirect: '/home',
      },
      {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: { title: 'Custom page title' },
      },
      {
        path: '/about',
        name: 'About',
        component: About,
        meta: { title: 'Custom page title' },
      },
      {
        path: '/contact',
        name: 'Contact',
        component: Contact,
        meta: { title: 'Projektagenten - Kontakt Os' },
      },
      // More like this
      // Any other path we redirect to home
      {
        path: '*',
        redirect: '',
      },
    ],
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior: (to) => {
    if (to.hash) {
      return {
        selector: to.hash,
      };
    } else {
      return { x: 0, y: 0 };
    }
  },
});

// Authentication guard for routes with authentication required
router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth == true)) {
    if (!cookieUtils.getCookie('session')) {
      next({ name: 'Home' });
    } else {
      next();
    }
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  Vue.nextTick(() => {
    document.title = to.meta.title || to.name;
  });
});

export default router;

My problem is starts when I run the project, and open the project page, I get a blank page and the following error in the console:

It seems like I have triggered an endless recursive call withing vue-gtag, as the source code looks like this:

I'm having a hard time pinpointing this error, and what I did wrong. Any help is appreciated, also different solutions to the task I'm initially trying to perform.

Answer 1

You need to pass router as the 3rd parameter for Vue.use() and not as part of the 2nd argument

Vue.use(VueGtag, {
  config: { id: 'GTM-XXXXXXX' },
}, router);

See documentation here: https://matteo-gabriele.gitbook.io/vue-gtag/auto-tracking