Add support for nuxt 3

Adding the google analytics module to nuxt 3 generates the following errors:

• ERROR Error compiling template
• ERROR Cannot start nuxt: serialize is not defined

Here my nuxt config

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: ["~/assets/css/styles.css"],
    build: {
        postcss: {
            postcssOptions: require("./postcss.config.js"),
        },
    },
    modules: [
        ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
    ]
})

[cayekple]

@afiorenza Yes, I changed the package to yarn add vue-gtag-next, then I created vue-gtag.client.js in the plugins folder at the project root.

vue-gtag.client.js

import { defineNuxtPlugin } from '#app'
import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  const getGDPR = localStorage.getItem('GDPR:accepted');
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'G-XXXXXXXXX
    },
    appName: 'APP NAME',
    enabled: getGDPR === 'true',
    pageTrackerScreenviewEnabled: true
  }, nuxtApp.vueApp.router);
});

[adarshmadrecha]

For nuxt 3 RC 11, the below code works fine.

Create ga.js file in plugins folder. No need to import or change anything in nuxt.config.js. You can name anything actually. I have named it ga.js.

import VueGtag from 'vue-gtag'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueGtag, {
        config: {
            id: 'GA_MEASUREMENT_ID',
        },
    }, nuxtApp.$router)
})