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

目標

Piniaを利用したvueファイルのStoryを作成する。

条件

Nuxt 3のプロジェクトが作成済みであること。3000番ポートで起動している想定としています。

Storybook 7がインストール済みであること。6006番ポートで起動している想定としています。

※Nuxt 3プロジェクトにStorybook 7を導入する手順に関しては以下の記事を参照ください。
https://n-laboratory.jp/articles/nuxt-storybook

Piniaがインストール済みであること。

※Nuxt 3プロジェクトにPiniaを導入する手順に関しては以下の記事を参照ください。
https://n-laboratory.jp/articles/nuxt3-vitest-pinia

利用するフレームワーク、ライブラリのバージョンは以下のとおりです。2023年11月24日時点での最新バージョンを利用します。

・Nuxt.js: 3.8.2
・Storybook: 7.5.3
・Pinia: 2.1.7

Storeの作成

1. Storeディレクトリの中に「user.ts」を新規作成して以下の内容で保存します。

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: ''
    }
  })
})

2. 「store.vue」を新規作成して以下の内容で保存します。

<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>

3. 以下のURLにアクセスし、画面が表示されていることを確認します。
http://localhost:3000/store
show store.vue in chrome
4. 「store.stories.ts」を新規作成して以下の内容で保存します。

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

5. 以下のURLにアクセスすると画面が表示されていますが、コンソールにPiniaのエラーが表示されていることを確認します。
http://localhost:6006
show store.vue in storybook

StorybookにPiniaの設定を追加

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

export default preview;

2. 以下のURLにアクセスすると各項目に値が設定された状態で画面が表示されていることを確認します。開発者ツールのコンソールにエラーが表示されていないことも併せて確認します。
http://localhost:6006
show profile

以上で全ての手順は完了になります

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

目標

条件

目次

Storeの作成

StorybookにPiniaの設定を追加