Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ 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.

This recipe assumes that you are using Vue 3 and Storybook >= 7.x. If you haven't upgraded yet, run the following command:

How to setup Pinia and Storybook

Pinia is the recommended standard for state management in Vue. It gives you a lightweight and type-safe way to handle global state for your applications. This recipe will show you how to integrate Pinia into Storybook so that you can test your state connected components.

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

Initialize Pinia

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

Register Pinia

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

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,322 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI