Nuxt 3中如何从组件访问vue-gtag插件注入的$gtag？

你当前的plugins/gtag.client.js配置已经正确安装了vue-gtag，但因为vue-gtag默认仅将$gtag挂载到Vue应用实例的globalProperties上，而Nuxt 3的useNuxtApp()返回的是Nuxt框架层面的应用实例，所以直接通过nuxtApp.$gtag会返回undefined。

以下是两种可行的解决方式：

方式一：修改插件，将$gtag挂载到Nuxt上下文（推荐） #

修改你的plugins/gtag.client.js，在安装完vue-gtag后，手动将$gtag提供给Nuxt应用上下文：

import VueGtag from 'vue-gtag';

export default defineNuxtPlugin(nuxtApp => {
  const router = useRouter();
  nuxtApp.vueApp.use(
    VueGtag,
    {
      config: {
        id: '你的GA跟踪ID'
      }
    },
    router
  );
  // 从Vue全局属性中获取$gtag，再挂载到Nuxt上下文
  const gtag = nuxtApp.vueApp.config.globalProperties.$gtag;
  nuxtApp.provide('gtag', gtag);
});

之后在组件中即可通过useNuxtApp()直接获取：

const { $gtag } = useNuxtApp();
// 调用示例：$gtag.event('page_view');

方式二：在组件中直接从Vue全局属性获取 #

如果不想修改插件，也可以在组件中通过Vue的getCurrentInstance获取全局属性中的$gtag：

import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const $gtag = instance?.appContext.config.globalProperties.$gtag;
// 调用示例：$gtag?.event('page_view');

内容的提问来源于stack exchange，提问作者Ronen Teva