Nuxt3 script setup组件集成Storybook遇computed未定义的解决方法

原因分析 #

Nuxt3通过unplugin-auto-import实现Vue Composition API（如computed、ref）的隐式导入，但Storybook默认未集成该插件，导致无法识别这些全局可用的API，从而抛出ReferenceError。

解决方案步骤 #

1. 安装依赖 #

安装实现自动导入的核心插件：

npm install unplugin-auto-import --save-dev
# 或用yarn
yarn add unplugin-auto-import -D
# 或pnpm
pnpm add unplugin-auto-import -D

2. 修改Storybook配置文件 #

找到.storybook/main.js（或.storybook/main.ts），在viteFinal选项中注入自动导入插件：

// .storybook/main.js
import AutoImport from 'unplugin-auto-import/vite'

export default {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx|vue)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
  },
  async viteFinal(config) {
    // 向Vite配置添加自动导入插件
    config.plugins.push(
      AutoImport({
        // 自动导入Vue Composition API
        imports: ['vue'],
        // 可选：生成TS类型声明文件，提升类型提示体验
        dts: './.storybook/auto-imports.d.ts'
      })
    )
    return config
  }
}

3. 适配Nuxt专属隐式导入（可选） #

如果组件中用到Nuxt的专属API（如useRouter、useRuntimeConfig），只需扩展imports数组：

AutoImport({
  imports: [
    'vue',
    'nuxt/app', // 导入Nuxt应用级API
    'pinia' // 若使用Pinia状态管理
  ],
  dts: './.storybook/auto-imports.d.ts'
})

4. 验证配置 #

重启Storybook服务，computed等API即可被正确识别，错误会消失。

TypeScript类型支持补充（可选） #

将生成的auto-imports.d.ts添加到tsconfig.json的include数组中，获得完整的类型提示：

// tsconfig.json
{
  "include": [
    ".storybook/auto-imports.d.ts",
    // 项目原有include项
  ]
}

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