※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ディレクトリの中に「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
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
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
以上で全ての手順は完了になります