{"id":27422,"library":"storybook-builder-vite-vue2","title":"storybook-builder-vite-vue2","description":"A Storybook builder plugin for Vite targeting Vue 2 projects, version 0.1.32. It enables using Vite as the bundler for Storybook instead of Webpack, providing fast startup times and instant HMR. Requires Vite >=2.6.7 and Storybook >=6.4.0. Key differentiator: specifically designed for Vue 2, not compatible with Vue 3 or other frameworks. Note: does not read vite.config.js by default; configuration must be done via viteFinal hook. Known limitations: full page reload on story file changes, prebundling issues in Storybook context.","status":"active","version":"0.1.32","language":"javascript","source_language":"en","source_url":"https://github.com/djaler/storybook-builder-vite-vue2","tags":["javascript","typescript"],"install":[{"cmd":"npm install storybook-builder-vite-vue2","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-builder-vite-vue2","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-builder-vite-vue2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Storybook functionality","package":"@storybook/core-common","optional":false},{"reason":"Required peer dependency for Vite builder","package":"vite","optional":false}],"imports":[{"note":"This is a builder plugin, not imported directly. Configure via Storybook's main.js: core: { builder: 'storybook-builder-vite-vue2' }","wrong":"import storybookBuilder from 'storybook-builder-vite-vue2'","symbol":"default","correct":"none (used via Storybook config)"},{"note":"TypeScript types are re-exported from @storybook/builder-vite","wrong":"import type { StorybookViteConfig } from 'storybook-builder-vite-vue2'","symbol":"StorybookViteConfig","correct":"import type { StorybookViteConfig } from '@storybook/builder-vite'"},{"note":"TypeScript helper type for viteFinal function; imported from @storybook/builder-vite","wrong":"import type { ViteFinal } from 'storybook-builder-vite-vue2'","symbol":"ViteFinal","correct":"import type { ViteFinal } from '@storybook/builder-vite'"}],"quickstart":{"code":"// .storybook/main.js\nmodule.exports = {\n  stories: ['../src/**/*.stories.@(js|ts)'],\n  addons: ['@storybook/addon-essentials'],\n  core: {\n    builder: 'storybook-builder-vite-vue2',\n  },\n  async viteFinal(config, { configType }) {\n    // Customize Vite config here\n    const { mergeConfig } = require('vite');\n    return mergeConfig(config, {\n      resolve: {\n        alias: { 'vue': 'vue/dist/vue.esm.js' },\n      },\n    });\n  },\n};","lang":"javascript","description":"Configures Storybook with the Vite builder for a Vue 2 project, showing how to set the builder and customize Vite config via viteFinal."},"warnings":[{"fix":"Remove @storybook/manager-webpack5 if installed. The builder only works with manager-webpack4 (default).","message":"You must use @storybook/manager-webpack4, not @storybook/manager-webpack5, with this builder.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Use viteFinal in .storybook/main.js to merge custom Vite config.","message":"The builder does NOT read your vite.config.js by default. Custom config must be done via viteFinal hook.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"No workaround; known limitation. Ensure component files are separate from story files.","message":"Saving a story file triggers full page reload, not HMR. HMR works for component files.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"In viteFinal, add to config.optimizeDeps.include: ['dependency-name'].","message":"Vite may pre-bundle dependencies newly detected, causing confusing errors in Storybook. Add dependencies to optimizeDeps.include.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure story files have the .stories.tsx extension, even for Vue 2.","message":"Story files need .stories.tsx or .stories.jsx suffix for autoreload to work.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install storybook-builder-vite-vue2 --save-dev (or yarn/pnpm equivalent).","cause":"Package not installed or not in node_modules.","error":"Module not found: Can't resolve 'storybook-builder-vite-vue2'"},{"fix":"Export a function via module.exports = { viteFinal: async (config, options) => { ... } }","cause":"Invalid export in main.js; module.exports does not contain a function named viteFinal.","error":"The 'viteFinal' hook is not a function"},{"fix":"Ensure Storybook >=6.4.0 and that core.builder is set to 'storybook-builder-vite-vue2' in main.js.","cause":"Storybook version <6.4.0 or core.builder misconfiguration.","error":"No builder found for 'storybook-builder-vite-vue2'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}