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 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:
1. Initialize Pinia
Inside of .storybook/preview.ts, import and initialize Pinia.
2. Register Pinia
Import Storybook's setup function that lets you register tools with Storybook's Vue app instance.
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.