Nuxt3中@storybook/vue3子组件无法在面板渲染的问题

问题根源 #

Storybook的Vue3-Vite独立环境不会自动继承Nuxt3的组件自动导入配置，即便你在Nuxt配置中设置了components: true，Storybook仍无法识别未显式导入的子组件。

解决方案 #

通过在Storybook的Vite配置中添加组件自动导入插件，让Storybook扫描并识别你的组件：

1. 安装依赖

npm install unplugin-vue-components -D

2. 修改Storybook的main.js配置
   添加viteFinal配置项，集成组件自动导入插件：

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
module.exports = {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/vue3-vite',
  core: {
    disableTelemetry: true,
  },
  features: {
    storyStoreV7: true,
  },
  // 新增Vite配置，启用组件自动扫描
  viteFinal: async (config) => {
    const Components = require('unplugin-vue-components/vite');
    config.plugins.push(
      Components({
        // 指定组件所在目录，和Nuxt的components目录保持一致
        dirs: ['../components'],
        // 只处理.vue后缀的组件文件
        extensions: ['vue'],
        dts: false,
      })
    );
    return config;
  },
};

3. 重启Storybook
   停止当前运行的Storybook服务，重新执行启动命令，嵌套子组件即可正常渲染。

额外检查项 #

• 如果你的Nuxt配置自定义了组件目录（比如components: { dirs: ['components', 'modules/ui/components'] }），需要在unplugin-vue-components的dirs数组中添加所有对应的目录。
• 确保子组件的Vue文件没有语法错误，控制台无报错信息。
• 若仍有问题，可尝试在父组件的story文件中显式导入子组件，测试是否能正常渲染，以此排除组件本身的问题。

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