New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,067
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate Pinia and Storybook

Pinia is an intuitive, type safe, light and flexible Store for Vue This recipe shows you how to get the most out of Pinia in Storybook.

Prerequisites

This recipe assumes that you have a Vue 3 app using Pinia and have just set up Storybook >=7.0 using the getting started guide. Don’t have this? Follow Pinia's setup instructions then run:

Terminal
Loading...

1. Initialize Pinia

Inside of .storybook/preview.ts, import and initialize Pinia.

.storybook/preview.ts
Loading...

2. Register Pinia

Import Storybook's setup function that lets you register tools with Storybook's Vue app instance.

.storybook/preview.ts
Loading...
Need an example?

If you want to look at a full example, look at this awesome repo built by Chakir Qatab (ChakAs3).

Get involved

Now you're ready to use Pinia with Storybook. 🎉 If you use Pinia at work, we'd love your feedback on the Pinia + Storybook experience.

Join the maintainers and our thriving community in Discord.

Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI