{"id":15028,"library":"vue-cli-plugin-storybook","title":"Vue CLI Plugin for Storybook","description":"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.","status":"maintenance","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/storybookjs/vue-cli-plugin-storybook","tags":["javascript","vue","vue-cli","storybook"],"install":[{"cmd":"npm install vue-cli-plugin-storybook","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-storybook","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-storybook","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Storybook with Vue 2 projects.","package":"@storybook/vue","optional":false},{"reason":"Peer dependency for Storybook with Vue 3 projects, used by the plugin since v2.1.0.","package":"@storybook/vue3","optional":false}],"imports":[{"note":"This is a CLI command to invoke the plugin, not a JavaScript import. `npm install` alone will not configure the project correctly.","wrong":"npm install vue-cli-plugin-storybook","symbol":"Add Plugin via Vue CLI","correct":"vue add storybook"},{"note":"Used in `.storybook/config.js` for Storybook versions < 7 to load stories and register global components/plugins. Newer Storybook versions (7+) primarily use CSF 3 with `main.js` and `preview.js`.","wrong":"const { configure } = require('@storybook/vue');","symbol":"configure","correct":"import { configure } from '@storybook/vue';"},{"note":"For Storybook 7+ with Vue 3 and Vite, `setup` is used in `.storybook/preview.js` to extend the Vue application instance (e.g., install plugins, register global components) before stories render. This replaces aspects of the older `configure` function.","wrong":"const { setup } = require('@storybook/vue3-vite');","symbol":"setup","correct":"import { setup } from '@storybook/vue3-vite';"},{"note":"This API for defining stories (`storiesOf('Component').add(...)`) is part of Component Story Format (CSF) 2. It is deprecated and removed in Storybook 7.x and later, which relies on CSF 3 with named exports from a default meta object.","wrong":null,"symbol":"storiesOf","correct":"import { storiesOf } from '@storybook/vue';"}],"quickstart":{"code":"npx @vue/cli create my-storybook-app --default\ncd my-storybook-app\n\n# Add the Storybook plugin (choose Vue 3 preset if prompted, for this example)\nvue add storybook\n\n# The plugin adds Storybook commands and configuration.\n# Example `src/components/MyButton.vue`:\n// <template>\n//   <button :style=\"{ backgroundColor }\" @click=\"$emit('click')\">\n//     {{ label }}\n//   </button>\n// </template>\n//\n// <script lang=\"ts\">\n// import { defineComponent } from 'vue';\n// export default defineComponent({\n//   name: 'MyButton',\n//   props: {\n//     label: { type: String, required: true },\n//     backgroundColor: { type: String, default: '#42b983' },\n//   },\n// });\n// </script>\n//\n// <style scoped>\n// button {\n//   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n//   font-weight: 700;\n//   border: 0;\n//   border-radius: 3em;\n//   cursor: pointer;\n//   display: inline-block;\n//   line-height: 1;\n//   font-size: 14px;\n//   padding: 10px 16px;\n//   color: white;\n// }\n// </style>\n\n# Example Story file `src/stories/MyButton.stories.ts` (using CSF 3, compatible with Storybook 7+)\nimport type { Meta, StoryObj } from '@storybook/vue3';\nimport MyButton from '../components/MyButton.vue';\n\nconst meta: Meta<typeof MyButton> = {\n  title: 'Example/MyButton',\n  component: MyButton,\n  tags: ['autodocs'],\n  argTypes: {\n    backgroundColor: { control: 'color' },\n    onClick: { action: 'clicked' },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof MyButton>;\n\nexport const Primary: Story = {\n  args: {\n    label: 'Button',\n    backgroundColor: '#3f51b5',\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    label: 'Secondary Button',\n    backgroundColor: '#f50057',\n  },\n};\n\n# To run Storybook after installation:\nnpm run storybook:serve\n# or\nyarn storybook:serve","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"The underlying Vue CLI is in 'Maintenance Mode'. For new Vue projects, `create-vue` (Vite-based) is now recommended. This plugin's development aligns with Vue CLI's status, meaning its future major version updates are uncertain.","severity":"deprecated","affected_versions":">=2.1.0"},{"fix":"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.","message":"Storybook versions 7 and higher introduce significant breaking changes, including the removal of the `storiesOf` API and the `*.stories.mdx` format. Projects using this plugin that attempt to upgrade Storybook versions might encounter errors requiring manual migration to Component Story Format (CSF) 3 and `.mdx` files with CSF.","severity":"breaking","affected_versions":">=2.1.0"},{"fix":"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.","message":"Node.js version compatibility can be an issue. Storybook 8 requires Node.js 18+ and Storybook 9 requires Node.js 20+. If you update Storybook independently of the `vue-cli-plugin-storybook`, you might face Node.js compatibility errors if your project's Node.js version is too old.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"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') };`","message":"Webpack alias resolution issues, particularly for paths starting with `@` (e.g., `@/components/MyComponent.vue`), can occur because Storybook uses its own webpack config. While the plugin aims to resolve this, manual intervention might be needed.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"Upgrading Vue CLI to v5, which includes Webpack 5, can introduce breaking changes that might affect existing Storybook configurations generated by older versions of this plugin. This could manifest as compilation errors or unexpected behavior.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"This error typically occurs during a Storybook 7 migration due to package consolidation and path changes within the Storybook ecosystem.","error":"Cannot find module '@storybook/core/server'"},{"fix":"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.","cause":"Similar to the `Cannot find module` error, this is often seen during Storybook migrations (e.g., to v7) when the internal Storybook API changes and the plugin's integration expects an older method.","error":"TypeError: server.buildDev is not a function"},{"fix":"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).","cause":"Storybook might be trying to use the runtime-only build of Vue while stories require the full compiler, often due to webpack alias misconfiguration or Storybook not properly detecting the Vue setup.","error":"[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available."},{"fix":"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`.","cause":"Storybook's internal webpack configuration may not include the necessary loaders or plugin whitelisting for CSS preprocessors (e.g., Sass, Stylus) or custom webpack plugins used in the Vue CLI project.","error":"Module build failed (from ./node_modules/sass-loader/dist/cjs.js): [...] (usually related to CSS preprocessors like Stylus/Sass)"}],"ecosystem":"npm"}