storybook-builder-vite-vue2

0.1.32 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

cause Package not installed or not in node_modules.

fix

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

error The 'viteFinal' hook is not a function ↓

cause 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) => { ... } }

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

cause 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.

Warnings

breaking You 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).

gotcha The 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.

gotcha Saving 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.

gotcha Vite 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'].

gotcha Story 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.

Install

npm install storybook-builder-vite-vue2

yarn add storybook-builder-vite-vue2

pnpm add storybook-builder-vite-vue2

Imports

default
wrong
```
import storybookBuilder from 'storybook-builder-vite-vue2'
```
correct
```
none (used via Storybook config)
```
This is a builder plugin, not imported directly. Configure via Storybook's main.js: core: { builder: 'storybook-builder-vite-vue2' }

StorybookViteConfig

wrong

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

correct

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

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

ViteFinal

wrong

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

correct

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

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

Quickstart

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' },
      },
    });
  },
};