Nuxt 3にStorybook 8を導入して環境を構築する

$ npx storybook@latest init --type vue3 --builder vite
Need to install the following packages:
storybook@8.4.4
Ok to proceed? (y) y

"scripts": {
  "storybook": "storybook dev -p 6006",
},

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

<template>
  <div>
    <h1>Index.vue</h1>
  </div>
</template>

import type { Meta, StoryObj } from '@storybook/vue3'
import Index from '../pages/index.vue'

type Story = StoryObj<typeof Index>
const meta: Meta<typeof Index> = {
  title: 'Index',
}

export const Default: Story = {
  render: () => ({
    components: { Index },
    template: '<Index />',
  }),
}

export default meta

$ npm run storybook

$ npx nuxi@latest module add storybook

export default defineNuxtConfig({
  modules: ['@nuxtjs/storybook'],
  // nuxt.config.tsでStorybookの設定ができます。設定できる項目は以下を参照ください。
  // https://storybook.nuxtjs.org/getting-started/options
  storybook: {
      host: 'http://localhost',
      port: 6006,
  },
})

$ npm run dev
> dev
> nuxt dev
Nuxt 3.14.159 with Nitro 2.10.4
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose
  ➜ DevTools: press Shift + Alt + D in the browser (v1.6.0)  
  ➜ Storybook: http://localhost:6006/         

import type { StorybookConfig } from '@storybook/vue3-vite'

const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    // ソースディレクトリをデフォルトのルートからsrcに変更している場合は以下を設定します。
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
};
export default config

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
const config = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
};
export default config

import type { Preview } from '@storybook/vue3'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};
export default preview

/** @type { import('@storybook/vue3').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};
export default preview

import { foo } from '~/bar'

TypeError: Failed to fetch dynamically imported module:

import type { StorybookConfig } from '@storybook/vue3-vite'
import path from 'path'

const config: StorybookConfig = {
  // 以下を追加
  viteFinal: async (config) => {
    if (config?.resolve?.alias) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
        '~': path.resolve(__dirname, '../src'),
      }
    }
    return config
  },
};

$ npm install --save-dev unplugin-auto-import
$ npm install --save-dev unplugin-vue-components

import type { StorybookConfig } from '@storybook/vue3-vite'
import AutoImportFunctions from 'unplugin-auto-import/vite'
import AutoImportComponents from 'unplugin-vue-components/vite'
import path from 'path'

const config: StorybookConfig = {
  viteFinal: async (config) => {
    // 以下を追加
    if (config?.plugins) {
      config.plugins.push(
        // プリセットでvueやvee-validateなどが指定できます。
        // 指定できるプリセットは以下を参照ください。
        // https://github.com/unplugin/unplugin-auto-import/tree/main/src/presets
        AutoImportFunctions ({ imports: [
          'vue',
          'vee-validate',
          'vue-router',
          'pinia',
        ], dts: '.storybook/auto-imports.d.ts' }),
      )
      config.plugins.push(
        AutoImportComponents({
          // ソースディレクトリは「src」を想定しています。
          // ソースディレクトリがデフォルトの場合はdirs: ['components'],としてください。
          dirs: ['src/components'],
          dts: '.storybook/components.d.ts',
        }),
      )
    }
    return config
  },
}
export default config

<template>
  <input type='text'>
</template>

<script setup lang='ts'>
// nuxt 3が自動インポートする関数
const foo = ref('foo')
</script>
<template>
  <div>
    <h1>Index.vue</h1>
　　<!--  nuxt 3が自動インポートするコンポーネント -->
    <Button />
    {{ foo }}
  </div>
</template>

$ npm run storybook

"getActivePinia()" was called but there was no active Pinia. 
Are you trying to use a store before calling "app.use(pinia)"?

// .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)
})

Error: No such validator 'XXXX' exists.

// .storybook/preview.ts
import { localize } from '@vee-validate/i18n'
import ja from '@vee-validate/i18n/dist/locale/ja.json'
import { all } from '@vee-validate/rules'
import { defineRule, configure } from 'vee-validate'

configure({
  generateMessage: localize({ ja }),
})

Object.entries(all).forEach(([name, rule]) => {
  // 全バリデーションルールの読み込み
  defineRule(name, rule)
})