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.