Nuxt 3 - 如何从组件访问插件注入？

Question

使用 Nuxt 3 和vue-gtag$gtag ，从组件访问的正确方法是什么？

插件/gtag.client.js：

import VueGtag from 'vue-gtag';

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

在 Nuxt 2 中，this.$gtag可以从组件文件访问。

在Nuxt 3中，我似乎找不到它：

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

查看源代码，似乎定义正确，所以我不认为这是插件本身的问题。 app.config.globalProperties.$gtag = api;

Answer 1

我在 nuxt 3 中定义 domToImage 插件时遇到同样的问题。我找到了如下解决方案。希望对您有所帮助。

• 返回 nuxt 插件中提供的内容：

import domtoimage from "dom-to-image-more";
export default defineNuxtPlugin((nuxtApp) => {
    // nuxtApp.vueApp.use(domtoimage)
    return {
        provide: {
            domtoimage
        }
    }
})

• 在组件中使用：

const print = () => {
  console.log("Print ...")
  const { $domtoimage } = useNuxtApp()
  $domtoimage.toPng(printMeDiv)
    .then((dataUrl) => {
      console.log(dataUrl)
    })
  }
}