Nuxt3 with "bootstrap: false" : Cannot read properties of undefined (reading 'pageview')

[kaboume]

Please fill in at least the mandatory (*) questions below, or I will immediately close this issue without reading. Thanks

Environment *

Run this command in the project folder and fill in their results:

npm ls vue-gtag:
└── [email protected]

npm ls vue:
├─┬ @pinia/[email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ @vue-leaflet/[email protected]
│ └─┬ [email protected]
│ └─┬ @vue/[email protected]
│ └── [email protected] deduped
├─┬ @vuepic/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @nuxt/[email protected]
│ │ ├─┬ @vitejs/[email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ @vitejs/[email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ @unhead/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└── [email protected] deduped

Description *

My App is under vue3 & Nuxt3.
I would like to send the event "pageview" only if the user consented to the rgpd banner.

So, I created in the "plugins" folder of my Nuxt3 application a file named : analytics.client.js with this content :

import VueGtag from 'vue-gtag'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    bootstrap: false,
    config: {
      id: 'G-XXXXXXXXXXXX',
    },
  }, nuxtApp.$router)
})

And in my Nuxt Page, I added :

<script setup>
import { bootstrap } from 'vue-gtag'
....

onMounted(() => {
  bootstrap().then((gtag) => {
    console.log('gtag', gtag)
    gtag.pageview(route.fullPath)
  })
})
</script>

Then when I load the page, I have this messages :

gtag undefined
my-page.vue:55 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pageview')

[peterbabinec]

I am experiencing the same, using "vue-gtag": "^1.16.1" and "vue": "^2.7.13":

configuration:

  vue.use(VueGtag, {
    disableScriptLoad: false,
    bootstrap: false,
    config: { id: "G-XXXXXXXXXXXX" },
  });

and then doing this produces Uncaught (in promise) TypeError: gtag is undefined:

import { bootstrap } from "vue-gtag";
...
    async register() {
      bootstrap().then((gtag) => {
        gtag.event("register", { method: "Test" });
      });
      ...
    },

However when I call it with this.$gtag inside then block it works fine. Not sure if that's intended behaviour or not.

[ionut-tatu]

Any solutions?