Vite

Storybook Vite builder bundles your components and stories with Vite, a fast ESM bundler.

For applications built with Vite: it allows reusing the existing configuration in Storybook.
For applications built with Webpack: it provides faster startup and refresh times, with the disadvantage that your component's execution environment differs from your application.

Setup

If you ran npx storybook init to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.

Run the following command to install the builder.

npm install @storybook/builder-vite --save-dev

Update your Storybook configuration (in .storybook/main.js|ts) to include the builder.

.storybook/main.js|ts

module.exports = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
  },
};

Out of the box, Storybook's Vite builder includes a set of configuration defaults for the supported frameworks. You can also fine-tune them or override them to match your existing configuration as, by default, the builder does not read your vite.config.js file. For example, if you need to set up aliasing, you can adjust your Storybook configuration file (.storybook/main.js|ts) and provide the following:

.storybook/main.js|cjs|ts

const { mergeConfig } = require('vite');
 
module.exports = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config) {
    // Merge custom configuration into the default config
    return mergeConfig(config, {
      // Use the same "resolve" configuration as your app
      resolve: (await import('../vite.config.js')).default.resolve,
      // Add dependencies to pre-optimization
      optimizeDeps: {
        include: ['storybook-dark-mode'],
      },
    });
  },
};

The asynchronous functionviteFinal receives a config object with the default builder configuration and returns the updated configuration with the defined alias.

You can also override the builder's configuration based on the environment. For instance, if you need to provide a custom configuration for development purposes and another for production, you can extend the default configuration as follows:

.storybook/main.js|ts

const { mergeConfig } = require('vite');
 
module.exports = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config, { configType }) {
    if (configType === 'DEVELOPMENT') {
      // Your development configuration goes here
    }
    if (configType === 'PRODUCTION') {
      // Your production configuration goes here.
    }
    return mergeConfig(config, {
      // Your environment configuration here
    });
  },
};

TypeScript

If you need, you can also configure Storybook's Vite builder using TypeScript. Rename your .storybook/main.js to .storybook/main.ts and adjust it as follows:

.storybook/main.ts

import type { StorybookViteConfig } from '@storybook/builder-vite';
 
const config: StorybookViteConfig = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config, options) {
    // Add your configuration here
    return config;
  },
};
 
export default config;

Troubleshooting

Working directory not being detected

By default, the Vite builder enables Vite's server.fs.strict option for increased security, defining the project's root to Storybook's configuration directory If you need to override it, you can use the viteFinal function and adjust it.

ArgTypes are not generated automatically

Currently, automatic argType inference is only available for React and Vue3. With React, the Vite builder defaults to react-docgen-typescript if TypeScript is listed as a dependency. If you run into any issues, you can revert to react-docgen by updating your Storybook configuration file as follows:

.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite',
  },
  typescript: {
    reactDocgen: 'react-docgen', // 👈 react-docgen configured here.
  },
};

Learn more about builders

Vite builder for bundling with Vite
Webpack builder for bundling with Webpack
Builder API for building a Storybook builder