{"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,"search_vec":"'0.1.32':17 '2':14,49 '2.6.7':39 '3':54 '6.4.0':42 'builder':3,8 'bundler':24 'chang':80 'compat':51 'configur':65 'context':85 'default':64 'design':46 'differenti':44 'done':68 'enabl':19 'fast':31 'file':79 'framework':57 'full':74 'hmr':36 'hook':71 'instant':35 'instead':27 'issu':82 'javascript':86 'key':43 'known':72 'limit':73 'must':66 'note':58 'page':75 'plugin':9 'prebundl':81 'project':15 'provid':30 'read':61 'reload':76 'requir':37 'specif':45 'startup':32 'stori':78 'storybook':2,7,26,41,84 'storybook-builder-vite-vue2':1 'target':12 'time':33 'typescript':87 'use':20 'version':16 'via':69 'vite':4,11,21,38 'vite.config.js':62 'vitefin':70 'vue':13,48,53 'vue2':5 'webpack':29","created_at":"2026-05-01T17:46:11.356574+00:00","updated_at":"2026-05-01T17:46:11.356574+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/djaler/storybook-builder-vite-vue2","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-builder-vite-vue2","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-04-27","next_check":"2026-07-26","install_tag":null}}