Docs
Storybook Docs

viteFinal

Parent: main.js|ts configuration

Type: (config: Vite.InlineConfig, options: Options) => Vite.InlineConfig | Promise<Vite.InlineConfig>

Customize Storybook's Vite setup when using the Vite builder.

.storybook/main.js
export default {
  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  async viteFinal(config, { configType }) {
    const { mergeConfig } = await import('vite');
 
    if (configType === 'DEVELOPMENT') {
      // Your development configuration goes here
    }
    if (configType === 'PRODUCTION') {
      // Your production configuration goes here.
    }
    return mergeConfig(config, {
      // Your environment configuration here
    });
  },
};

Options

Type: { configType?: 'DEVELOPMENT' | 'PRODUCTION' }

There are other options that are difficult to document here. Please introspect the type definition for more information.

Join the community

6,378 developers and counting
Open source software
Maintained by
Chromatic
Special thanks to Netlify and CircleCi