Integrate Pinia with Storybook

Pinia is an intuitive, type safe, light and flexible Store for Vue

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:

# Add Storybook:
npm create storybook@latest

1. Initialize Pinia

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

// .storybook/preview.ts
 
import { type Preview }  from '@storybook/vue3';
 
import { createPinia } from 'pinia';
 
const pinia = createPinia();
 
const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
    },
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

2. Register Pinia

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

// .storybook/preview.ts
 
import { type Preview, setup }  from '@storybook/vue3';
 
import { type App } from 'vue';
 
import { createPinia } from 'pinia';
 
const pinia = createPinia();
 
setup((app: App) => {
  app.use(pinia);
});
 
const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
    },
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

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.