vue.js - Gtag in Nuxt.js

Question

I'm really facing trouble configuring gtag in my nuxt js app.

I follow this guide:

https://www.carlcassar.com/articles/add-google-analytics-to-a-nuxt-js-app/

This is my plugin :

    import Vue from 'vue';
    import VueGtag from 'vue-gtag';
    
    Vue.use(VueGtag, {
        config: { id: 'G-*********' },
        appName: 'app-name',
    });

And this is how i Load it in nuxt.confing.js

      plugins: [
        "@/plugins/aos.client",
        "@/plugins/progress-path",
        "@/plugins/vue-input-ui",
        '@plugins/vue-js-modal.js',
        "@/plugins/paypal",
        "@/plugins/autocomplete",
        "@/plugins/lazy-load",
        {
          src: './plugins/gtag.js',
          mode: 'client'
        },
      ],

But I'm really facing trouble not getting anything to analytics console.

This is the gtag from google

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-*********"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-*********');
    </script>

Where am I wrong?

Thanks everyone

Answer 1

From the tutorial that you are following: Track page views.

You need to wrap the Vue.use function in the export default in your plugin and pass the router:

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ app }) => {
  Vue.use(VueGtag, {
    config: { id: 'G-*********' },
    appName: 'app-name',
  }, app.router);
}