Not seeing data in Google Analytics after install

[Marky]

Description

Installed and configured VueGtag, but no events show up in Google Analytics

Expected behavior

Analytics show up

Actual behavior

Nothing reported to Google Analytics

Environment

vue-gtag@2.0.1

Vue 3
Vite

Windows 10 (Testing)
Ubuntu 20.4 (Deploy)

Brave and others

Reproducible Demo

import { createApp } from 'vue'
import store from './store'
import App from './App.vue'
import VueGtag from "vue-gtag";
import './index.css'

const app = createApp(App).use(store).use(VueGtag, {
  config: { id: "G-XXXXXXXXXX" }
}).mount('#app')

[Bartol Freškura]

@officiallymarky

Can you please describe how you solved this issue? I'm having the same problem :(

[Bartol Freškura]

Solved it by moving GTag id environment variable from private env variables to public variables in defineNuxtConfig as Gtag ID should be visible on the client side in order for this plugin to work.

How the code looks now

nuxt.config.ts:

...
runtimeConfig: {
    public: {
      gtagId: "",
      backendUrl: "xxxxxx",
    },
  },
...

plugins/vue-gtag.ts:

import VueGtag from "vue-gtag";

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  nuxtApp.vueApp.use(VueGtag, {
    config: {
      id: config.public.gtagId,
    },
  });
});