如何在Storybook 7中创建仅嵌入MDX的隐藏Vue组件故事

完全可以实现。你只需要在MDX的<Story>标签中添加特定参数，就能让故事仅在文档里渲染可运行示例，同时不在侧边栏显示。

具体实现步骤 #

在MDX文件中定义故事时，给目标故事添加parameters.options.hidden: true参数，同时可搭配docs.inline让示例更贴合文档流：

import { Meta, Story } from '@storybook/addon-docs';
import MyComplexVueComponent from './MyComplexVueComponent.vue';

<Meta title="Components/MyComplexComponent" component={MyComplexVueComponent} />

# 我的复杂组件文档

这里可以写组件的详细说明、使用场景、API参数等内容...

## 基础用法示例

<Story 
  name="HiddenBaseExample" 
  parameters={{
    options: { hidden: true }, // 核心：隐藏侧边栏的故事条目
    docs: { inline: true } // 可选：让示例直接嵌入文档，不生成单独面板
  }}
>
  {() => ({
    components: { MyComplexVueComponent },
    template: `<MyComplexVueComponent title="基础示例" />`
  })}
</Story>

## 带自定义配置的示例

<Story 
  name="HiddenCustomExample" 
  parameters={{ options: { hidden: true } }}
>
  {() => ({
    components: { MyComplexVueComponent },
    template: `<MyComplexVueComponent title="自定义配置" theme="dark" />`
  })}
</Story>

参数说明 #

• parameters.options.hidden: true：直接让该故事从侧边栏的故事列表中消失，但不影响其在MDX中的渲染功能。
• docs.inline: true：可选配置，将可运行示例直接嵌入当前文档段落中，替代默认的独立面板展示形式，让文档结构更连贯。

额外场景：引用CSF中的隐藏故事 #

如果你习惯在CSF文件（.stories.js/ts）中编写故事，再在MDX里引用，只需给CSF中的目标故事添加同样的hidden参数即可：

// MyComplexVueComponent.stories.js
import MyComplexVueComponent from './MyComplexVueComponent.vue';

export default {
  title: 'Components/MyComplexComponent',
  component: MyComplexVueComponent,
};

export const HiddenCSFExample = {
  render: () => ({
    components: { MyComplexVueComponent },
    template: `<MyComplexVueComponent title="CSF隐藏示例" />`,
  }),
  parameters: { options: { hidden: true } },
};

然后在MDX中通过ID引用：

<Story id="components-mycomplexcomponent-hiddencsfexample" />

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