N-LAB

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

目標


条件


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

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

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

目次

  1. Storeの作成
  2. StorybookにPiniaの設定を追加


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


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