Nuxt 3 - 带有 Vue Toast 通知的客户端插件

Question

我在使用 Nuxt 3 客户端插件时遇到一些问题。

Nuxt 3 插件文档是这样说的：

Nuxt会自动读取你的插件目录中的文件并加载它们。您可以在文件名中使用 .server 或 .client 后缀来仅在服务器端或客户端加载插件。

我添加了一个名为“toaster.client.ts”的插件，其中我使用了一个 Vue Toast 通知包，该包具有“info”、“success”等方法。这就是我在页面中使用它的方式：

const { $toast } = useNuxtApp(); $toast.success('It works');

但是，当我刷新页面时，出现以下错误：

Cannot read properties of undefined (reading 'success')

我必须这样做才能使其正常工作：

if(process.client){ $toast.success('You did it!'); }

请问我该如何解决这个问题？我正在使用带有 Composition API（设置）和 Typescript 的 Nuxt 3

Answer 1

现在好了！

我忘记将它用于生命周期挂钩。