How to use vite plugin with storybook?
How to use vite plugin with storybook?
1 answer
by
rollin ,
9 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:
- Install the Vite plugin for Storybook:
1
|
npm install vite-plugin-storybook --save-dev |
- 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(),
],
});
|
- 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"),
};
|
- 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",
},
|
- 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.