Nuxt 3 × Storybook 7で自動インポート（関数・コンポーネント）の設定をする

<script lang="ts" setup>

const count = ref(0)
const handleClick = () => {
  count.value++
}
</script>

<template>
  <div>
    <p> count: {{ count }}</p>
    <button @click="handleClick">click</button>
  </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 install --save-dev unplugin-auto-import

import type { StorybookConfig } from "@storybook/vue3-vite";
// 追加
import AutoImportFunctions from "unplugin-auto-import/vite";

const config: StorybookConfig = {
  // ここから追加
  async viteFinal(config) {
    if (config.plugins) {
      config.plugins.push(
        AutoImportFunctions ({ imports: ["vue"], dts: ".storybook/auto-imports.d.ts" })
      );
    }
    return {
      ...config,
      define: {
        ...config.define,
        global: "window",
      },
    };
  },
  // ここまで追加
};
export default config;

<template>
  <div>
    Text.vue
  </div>
</template>

<script lang="ts" setup>

const count = ref(0)
const handleClick = () => {
  count.value++
}
</script>

<template>
  <div>
    // 追加
    <Text />
    <p> count: {{ count }}</p>
    <button @click="handleClick">click</button>
  </div>
</template>

$ 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";

const config: StorybookConfig = {
  async viteFinal(config) {
    if (config.plugins) {
      config.plugins.push(
        AutoImportFunctions({ imports: ["vue"], dts: ".storybook/auto-imports.d.ts" })
      );
      // ここから追加
      config.plugins.push(
        AutoImportComponents({
          // Nuxtのソースディレクトリを「src」に変更しているためパスに「src/」を追加しています。
          dirs: ["src/components"],
          dts: ".storybook/components.d.ts",
        })
      );
      // ここまで追加
    }
    return {
      ...config,
      define: {
        ...config.define,
        global: "window",
      },
    };
  },
};
export default config;