Access plugin injection from components in Nuxt 3

Question

Using Nuxt 3 and vue-gtag, what is the correct way to access $gtag from a component?

plugin/gtag.client.js:

import VueGtag from 'vue-gtag';

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

In Nuxt 2, this.$gtag can be accessed from the component file.

In Nuxt 3, I can't seem to find it:

const nuxtApp = useNuxtApp();
nuxtApp.$gtag //undefined

Looking at the source code, it seems that the definition is correct, so I don’t think it is a problem with the plug-in itself. app.config.globalProperties.$gtag = api;

Answer 1

I encountered the same problem when defining the domToImage plugin in nuxt 3. I found the following solution. hope it helps you.

• Returns what is provided in the nuxt plug-in:

• Use in components: