The `vue-cli-plugin-storybook` package provides a streamlined integration of Storybook into existing or new Vue CLI projects. It automates much of the initial setup, including configuring webpack, generating boilerplate files for Storybook, and integrating Storybook commands (like `storybook:serve` and `storybook:build`) directly into the `vue-cli-service`. The latest stable version, 2.1.0, supports Vue 3 and Storybook 6.x. While a 3.x release candidate exists for Vue CLI 5 and Storybook 6.5+, the plugin's overall release cadence has slowed. This is largely due to Vue CLI itself being in maintenance mode, with `create-vue` (Vite-based projects) now recommended for new Vue applications. The plugin's key differentiator is its ability to abstract away complex Storybook configurations, leveraging the Vue CLI's webpack setup to minimize manual intervention for developers working within the Vue CLI ecosystem. For new Storybook setups, the general `npm create storybook@latest` CLI is increasingly the recommended installation method across frameworks, including Vue.
npm install vue-cli-plugin-storybookVerified import paths — ran on the pinned version, not inferred.
Demonstrates how to add the plugin to a Vue CLI project, defines a sample Vue component, and creates a basic Storybook story using modern Component Story Format (CSF) 3, concluding with instructions to launch Storybook.
For new projects, consider using `npm create storybook@latest` directly, which integrates with Vite and the latest Vue versions without relying on Vue CLI plugins.
Refer to the official Storybook migration guides (e.g., from v6 to v8, or v7 to v8) for detailed instructions on updating story files and configuration. Specifically, convert `storiesOf` to CSF 3 named exports.
Ensure your Node.js version meets the requirements of your Storybook version. If using Storybook 8+, upgrade to Node.js 18 or higher; for Storybook 9+, use Node.js 20 or higher. Use a Node Version Manager (like `nvm`) to easily switch versions.
Manually extend Storybook's webpack configuration in `.storybook/webpack.config.js` to include the correct alias resolution for `@` or other custom paths. For example, add `defaultConfig.resolve.alias = { ...defaultConfig.resolve.alias, '@': path.resolve(__dirname, '../src') };`If migrating a Vue CLI project to v5, consider using `vue add storybook@next` or re-running `vue add storybook` to regenerate Storybook configuration tailored for Vue CLI 5. Review Vue CLI's own migration guide for Webpack 5 changes.
Try running `npx sb@latest upgrade` to ensure Storybook dependencies are correctly updated and migrated. If the problem persists, manually check and update Storybook-related packages in `package.json` to their latest compatible versions.
Ensure all `@storybook/*` packages are aligned to the same major version. Running `npx sb@latest upgrade` is the recommended first step. If issues persist, check the `vue-cli-plugin-storybook` GitHub issues for workarounds or compatible Storybook versions.
In your `.storybook/webpack.config.js`, ensure Vue's alias points to the full build. Example: `config.resolve.alias['vue$'] = 'vue/dist/vue.esm-bundler.js';` (for Vue 3 ESM) or `'vue/dist/vue.esm.js'` (for Vue 2 ESM).
Extend Storybook's webpack config in `.storybook/webpack.config.js` to include the specific loaders for your CSS preprocessor. For custom plugins, add their names to the `pluginOptions.storybook.allowedPlugins` array in `vue.config.js`.