如何在Storybook 7的MDX中渲染嵌套Vue组件？

问题背景 #

单个Vue组件能在Storybook 7的MDX文档中正常展示，但使用包含<Tab>子组件的<Tabs>组件时，出现React.createElement类型错误，提示“expected a string or a class/function but got: object”。

报错原因 #

Storybook 7的MDX文档页面默认基于React环境渲染，直接在MDX中书写Vue组件标签会被React解析器错误处理，导致组件类型不匹配。

正确实现方式 #

方式一：使用Canvas+Story包裹Vue组件 #

通过<Canvas>和<Story>组件提供Vue渲染上下文，在Story的返回函数中定义Vue组件和模板：

import { Canvas, Meta, Story } from '@storybook/blocks';
import * as TabsStories from './Tabs.stories';
import Tabs from "@/components/tabs/Tabs.vue";
import Tab from "@/components/tabs/Tab.vue";

<Meta of={TabsStories}/>

<Canvas>
  <Story name="嵌套Tabs示例">
    {() => ({
      components: { Tabs, Tab },
      template: `
        <Tabs selectedKey="component">
          <Tab key="component" label="Test">
            <div>Content</div>
          </Tab>
        </Tabs>
      `
    })}
  </Story>
</Canvas>

方式二：复用已定义的Vue故事 #

如果已经在Tabs.stories.js中写好带嵌套子组件的故事，直接在MDX中引用即可：

import { Canvas, Meta, Story } from '@storybook/blocks';
import * as TabsStories from './Tabs.stories';

<Meta of={TabsStories}/>

<Canvas>
  <Story of={TabsStories.NestedTabs} />
</Canvas>

关键说明 #

• 不要直接在MDX的顶层写Vue组件标签，必须放入<Canvas>内部的<Story>中，确保由Vue渲染器处理组件。
• 确保Vue组件的导出为默认导出（即export default Tabs），避免导入时获取到错误的对象类型。

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