How to use vite plugin with storybook?

by herminia_bruen , in category: Javascript , 9 months ago

How to use vite plugin with storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by rollin , 8 months ago

@herminia_bruen 

To use Vite plugin with Storybook, first ensure that you have installed Vite and Storybook in your project. Follow these steps to set up Vite as a plugin with Storybook:

  1. Install the Vite plugin for Storybook:
1
npm install vite-plugin-storybook --save-dev


  1. Create a vite.config.ts file in the root of your project and add the following configuration:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue';
import storybookPlugin from 'vite-plugin-storybook';

export default defineConfig({
  plugins: [
    createVuePlugin(),
    storybookPlugin(),
  ],
});


  1. Update your Storybook configuration to use Vite by creating a .storybook/main.js file with the following configuration:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  typescript: {
    check: false,
    checkOptions: {},
  },
  addons: [
    '@storybook/addon-essentials',
  ],
  reactOptions: {
    fastRefresh: true,
  },
  viteConfig: require("../vite.config.ts"),
};


  1. Update your Storybook scripts in package.json to start Storybook with Vite:
1
2
3
4
"scripts": {
  "storybook": "start-storybook -s public --config .storybook/main.js",
  "storybook:build": "build-storybook -s public --config .storybook/main.js",
},


  1. Start Storybook with Vite by running:
1
npm run storybook


Now your Storybook should be running with Vite as the bundler. You can start creating and viewing your components' stories with Vite and Storybook.