Registry / web-framework / storybook-builder-vite-vue2

storybook-builder-vite-vue2

library0.1.32jsnpmunverified

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.

web-framework devops

npm install storybook-builder-vite-vue2

github ↗package ↗

INSTALL

IMPORT

SIG · STORYBOOK-BUILDER-

storybook-builder-vite-vue2

web-frameworkjavascriptv0.1.32

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ none (used via Storybook config)

✗ import storybookBuilder from 'storybook-builder-vite-vue2'

This is a builder plugin, not imported directly. Configure via Storybook's main.js: core: { builder: 'storybook-builder-vite-vue2' }

StorybookViteConfig

✓ import type { StorybookViteConfig } from '@storybook/builder-vite'

✗ import type { StorybookViteConfig } from 'storybook-builder-vite-vue2'

TypeScript types are re-exported from @storybook/builder-vite

ViteFinal

✓ import type { ViteFinal } from '@storybook/builder-vite'

✗ import type { ViteFinal } from 'storybook-builder-vite-vue2'

TypeScript helper type for viteFinal function; imported from @storybook/builder-vite

Configures Storybook with the Vite builder for a Vue 2 project, showing how to set the builder and customize Vite config via viteFinal.

// .storybook/main.js module.exports = { stories: ['../src/**/*.stories.@(js|ts)'], addons: ['@storybook/addon-essentials'], core: { builder: 'storybook-builder-vite-vue2', }, async viteFinal(config, { configType }) { // Customize Vite config here const { mergeConfig } = require('vite'); return mergeConfig(config, { resolve: { alias: { 'vue': 'vue/dist/vue.esm.js' }, }, }); }, };

Debug

Known issues

breakingYou must use @storybook/manager-webpack4, not @storybook/manager-webpack5, with this builder.

fix

Remove @storybook/manager-webpack5 if installed. The builder only works with manager-webpack4 (default).

affects: >=0.1.0

gotchaThe builder does NOT read your vite.config.js by default. Custom config must be done via viteFinal hook.

fix

Use viteFinal in .storybook/main.js to merge custom Vite config.

affects: >=0.1.0

gotchaSaving a story file triggers full page reload, not HMR. HMR works for component files.

fix

No workaround; known limitation. Ensure component files are separate from story files.

affects: >=0.1.0

gotchaVite may pre-bundle dependencies newly detected, causing confusing errors in Storybook. Add dependencies to optimizeDeps.include.

fix

In viteFinal, add to config.optimizeDeps.include: ['dependency-name'].

affects: >=0.1.0

gotchaStory files need .stories.tsx or .stories.jsx suffix for autoreload to work.

fix

Ensure story files have the .stories.tsx extension, even for Vue 2.

affects: >=0.1.0

Errors

Common errors & fixes

Module not found: Can't resolve 'storybook-builder-vite-vue2'

Package not installed or not in node_modules.

fix

Run npm install storybook-builder-vite-vue2 --save-dev (or yarn/pnpm equivalent).

The 'viteFinal' hook is not a function

Invalid export in main.js; module.exports does not contain a function named viteFinal.

fix

Export a function via module.exports = { viteFinal: async (config, options) => { ... } }

No builder found for 'storybook-builder-vite-vue2'

Storybook version <6.4.0 or core.builder misconfiguration.

fix

Ensure Storybook >=6.4.0 and that core.builder is set to 'storybook-builder-vite-vue2' in main.js.

Upgrade

Version history

0.1.32latest on npm

Audit

Dependencies

@storybook/core-commonrequiredRequired peer dependency for Storybook functionality

viterequiredRequired peer dependency for Vite builder

Agent activity

3 hits · last 30 days

node

Resources

githubhttps://github.com/djaler/storybook-builder-vite-vue2 ↗

packagehttps://www.npmjs.com/package/storybook-builder-vite-vue2 ↗