Nuxt3客户端插件Vue Toast Notification使用问题求助

问题根源 #

Nuxt3默认启用SSR（服务端渲染），页面刷新时会先在服务端执行渲染逻辑，但你的toaster.client.ts插件仅在客户端加载，服务端环境中$toast并未被注册，因此直接调用$toast.success()会抛出Cannot read properties of undefined错误。

具体解决方案 #

1. 用onMounted钩子包裹调用逻辑

onMounted是Vue的生命周期钩子，仅在客户端执行，能完全避开服务端渲染阶段：

<script setup lang="ts">
const { $toast } = useNuxtApp();

onMounted(() => {
  $toast.success('It works');
});
</script>

2. 配合可选链操作符（可选）

如果需要在非钩子环境调用，可通过可选链避免报错，同时建议结合process.client确保仅在客户端执行：

<script setup lang="ts">
const { $toast } = useNuxtApp();

if (process.client) {
  $toast?.success('It works');
}
</script>

3. 确认插件注册正确性

检查你的toaster.client.ts插件是否正确将$toast注册到NuxtApp实例：

// plugins/toaster.client.ts
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-default.css';

export default defineNuxtPlugin(nuxtApp => {
  // 注册Vue Toast插件到Vue实例
  nuxtApp.vueApp.use(VueToast);
  // 手动将toast实例提供给NuxtApp，方便通过useNuxtApp获取
  nuxtApp.provide('toast', VueToast);
});

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