Storybook for Web components & Vite is a framework that makes it easy to develop and test UI components in isolation for applications using Web components built with Vite.
Storybook for Web components & Vite is only supported in Web components projects.
Requirements
- Vite ≥ 4.0
- Storybook ≥ 8.0
Getting started
In a project without Storybook
Follow the prompts after running this command in your Web components project's root directory:
More on getting started with Storybook.
In a project with Storybook
This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:
Automatic migration
When running the upgrade command above, you should get a prompt asking you to migrate to @storybook/web-components-vite, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
Manual migration
First, install the framework:
Then, update your .storybook/main.js|ts to change the framework property:
API
Options
You can pass an options object for additional configuration if needed:
The available options are:
builder
Type: Record<string, any>
Configure options for the framework's builder. For this framework, available options can be found in the Vite builder docs.
