Storybook mdx中使用Quasar Notify插件报$q.notify未定义（Quasar v2/Vue3）

问题复现特征 #

• 已参照官方文档在quasar.config.js完成Notify插件的配置与必要导入
• 在.mdx格式的Storybook故事文件中调用Notify能力时，触发$q.notify is undefined运行时报错
• 完全相同的业务实现代码，在Quasar V1版本环境下可正常运行，无该错误

核心原因 #

Quasar V2基于Vue3重构后，$q实例不再挂载到Vue全局原型，而是通过依赖注入方式提供给组件上下文；Storybook的MDX文件默认存在沙箱隔离，不会自动读取quasar.config.js中的插件配置完成全局注入，V1版本基于Vue2原型挂载的逻辑可跨上下文生效，因此不会出现该问题。

可落地解决方案 #

方案1：MDX内手动获取Quasar实例调用（单文件快速修复） #

不要直接依赖全局$q对象，在MDX对应的故事组件作用域内通过组合式API获取实例后调用：

// mdx文件顶部添加导入
import { useQuasar } from 'quasar'

// 在故事组件的setup/渲染逻辑内调用
const DemoStory = () => {
  const $q = useQuasar()
  const handleClick = () => {
    $q.notify({
      message: '测试通知',
      type: 'positive'
    })
  }
  return <button onClick={handleClick}>触发通知</button>
}

注意：useQuasar()必须在Vue组件的执行上下文中调用，不能直接在MDX根作用域的普通JS逻辑中执行。

方案2：配置Storybook全局装饰器（全量生效一劳永逸） #

修改Storybook预览配置文件（默认路径为.storybook/preview.js），手动注册Quasar及Notify插件，让所有故事文件（含MDX）都能获取到完整的Quasar实例：

import { Quasar, Notify } from 'quasar'
import { setup } from '@storybook/vue3'

// 全局注册Quasar插件
setup((app) => {
  app.use(Quasar, {
    plugins: { Notify },
    // 此处可直接复用你在quasar.config.js中配置的Notify参数
    config: {
      notify: {
        position: 'top-right',
        timeout: 2500
      }
    }
  })
})

配置完成后重启Storybook服务即可生效。

方案3：依赖版本兼容校验 #

如果使用Quasar官方生态的Storybook构建工具，请检查版本匹配关系：

• Quasar V2必须搭配0.2.0及以上版本的@quasar/storybook或storybook-builder-quasar依赖，低版本构建工具不会自动同步quasar.config.js中的插件配置
• 确认Storybook版本与Vue3、Quasar版本的兼容关系，跨大版本的依赖混装会导致插件注入逻辑失效

避坑提示：不要在MDX文件的非组件代码块、文档说明区域直接写$q.notify调用逻辑，这类代码不在Vue组件渲染上下文中，无论怎么配置都无法获取到注入的$q实例。

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