PrimeVue ToastEventBus消息已添加至DOM但未显示求助

问题情况 #

按参考代码实现的Toast功能，点击按钮后Toast消息已被添加到DOM结构中，但页面上完全看不到；同时控制台抛出警告：

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.
at
at

原因分析 #

1. Vue导入冲突：页面同时引入了全局版vue.global.prod.js和ESM版vue.esm-browser.js，导致Vue上下文混乱，Toast组件内部的ref无法正确绑定，触发警告。
2. EventBus已弃用：PrimeVue在Vue3版本中已不再推荐使用ToastEventBus，该方式存在兼容性问题，无法正确驱动Toast组件渲染内容。
3. 样式缺失：只引入了主题preset，但未加载PrimeVue的基础组件样式，导致Toast的视觉样式（如背景、文字、动画）完全缺失，即使DOM存在也看不到。

解决步骤 #

1. 清理重复Vue导入：删除全局版Vue脚本，统一使用ESM模块导入。
2. 改用ToastService：注册PrimeVue的ToastService，在组件中通过useToast钩子调用，替代旧的EventBus方式。
3. 补充样式引入：添加PrimeVue基础样式和主题样式的CDN链接。
4. 正确注册PrimeVue插件：使用app.use(PrimeVue)方式注册，而非直接操作PrimeVue.Config。

修正后的完整代码 #

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- 引入PrimeVue基础样式 -->
    <link rel="stylesheet" href="https://unpkg.com/primevue/resources/primevue.min.css" crossorigin="anonymous">
    <!-- 引入Aura主题样式 -->
    <link rel="stylesheet" href="https://unpkg.com/@primevue/themes/aura/aura-light-green/theme.css" crossorigin="anonymous">
    <!-- 移除全局Vue脚本，改用ESM导入 -->
    <script type="text/javascript" src="https://unpkg.com/primevue/umd/primevue.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
  <body>
    <div id="test-toastbutton"></div>
    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      // 导入ToastService和useToast钩子
      import { ToastService, useToast } from 'https://unpkg.com/primevue/toastservice/toastservice.esm.js'

      const app = createApp({
        setup() {
          // 使用useToast获取toast实例
          const toast = useToast();
          const addToast = () => {
            toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 })
          }

          return { addToast };
        },
        template: '<Toast /><button @click="addToast">Adding toast</button>'
      })
      // 注册PrimeVue插件和ToastService
      app.use(PrimeVue, {
        theme: {
            preset: PrimeVue.Themes.Aura
        }
      })
      app.use(ToastService)
      app.component('Toast', PrimeVue.Toast)
      app.mount('#test-toastbutton')
    </script>
  </body>
</html>

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