Storybook Addons插件在Vue组件中无法渲染，该怎么排查？

码农国玲提问于 2026-02-07 14:35:32 阅读 42

工具

最近在用Storybook开发Vue组件时，安装了@storybook/addon-essentials后，组件预览区域直接显示空白。之前单独运行组件没问题，但加上参数装饰器后就出错了。

我尝试在按钮组件的Story里这样配置：


// Button.stories.js
import { Meta } from '@storybook/addon-docs';
import Button from './Button.vue';

export default {
  title: 'Components/Button',
  component: Button,
  parameters: {
    controls: { expanded: true },
    essential: true // 这里是不是有问题？
  }
} satisfies Meta;

export const Primary = () => ({
  components: { Button },
  template: '<Button>Click me</Button>',
});

控制台没有报错，但预览区就是空白。已经试过删除node_modules和.storybook缓存，重新安装依赖还是不行。是不是Addon配置顺序有冲突？或者需要额外导入某些模块？

Addons插件

我来解答赞 5 收藏

反馈

1 条解答

Mc.静薇 Lv1

你这个配置里用的是@storybook/addon-essentials，但代码里没导入它。虽然名字叫“essential”，但需要手动引入。在预览文件或者主配置文件加一下：

import '@storybook/addon-essentials';

另外你那个参数配置里的 essential: true 是多余的，可以删掉。addons默认都会生效。

2026-02-07 15:20