Nuxt 3 × Storybook 7でPiniaを利用したStoryを追加する

import { defineStore } from 'pinia'

export type User = {
  user: {
    firstName: string;
    lastName: string;
    email: string;
    password: string;
  }
}

export const useUserStore = defineStore('user', {
  state: (): User => ({
    user: {
      firstName: '',
      lastName: '',
      email: '',
      password: ''
    }
  })
})

<script lang="ts" setup>
import { useUserStore } from '~/store/user'

const store = useUserStore()

const firstName = store.user.firstName
const lastName = store.user.lastName
const email = store.user.email
const password = store.user.password
</script>

<template>
  <div>
    <p>firstName: {{ firstName }}</p>
    <p>lastName: {{ lastName }}</p>
    <p>email: {{ email }}</p>
    <p>password: {{ password }}</p>
  </div>
</template>

import type { Meta, StoryObj } from '@storybook/vue3'
import Store from '~/pages/store.vue'
import { useUserStore } from '~/store/user'

type Story = StoryObj<typeof Store>;
const meta: Meta<typeof Store> = {
  title: 'Store'
}

export const Default: Story = {
  render: () => ({
    setup () {
      const store = useUserStore()
      store.user.firstName = 'John'
      store.user.lastName = 'Smith'
      store.user.email = 'test@test.com'
      store.user.password = 'test'
    },
    components: { Store },
    template: '<Store />'
  })
}

export default meta

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: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;