Nuxt 3にStorybook 7を導入する方法

$ npx storybook@latest init --type vue3 --builder vite
Need to install the following packages: storybook@7.5.3
Ok to proceed? (y) y
> postinstall
> nuxt prepare
√ We have detected that you're using ESLint. Would you like to install it? ... yes
  ✔   Configuring eslint-plugin-storybook in your package.json. Installing Storybook dependencies
> postinstall
> nuxt prepare
ℹ 🔌  Storybook Module Setup      
ℹ 📚  Storybook is configured   
✔ Types generated in .nuxt    
╭─────────────────────────────────────────────────────────────────────── 
│   Storybook was successfully installed in your project! 🎉    
╰───────────────────────────────────────────────────────────────────────
Running Storybook
> storybook
> storybook dev -p 6006 --quiet
@storybook/cli v7.5.3

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

$ npm run storybook
> storybook
> storybook dev -p 6006
@storybook/cli v7.5.3
info => Starting manager..
WARN No story files found for the specified pattern: src\**\*.mdx
WARN No story files found for the specified pattern: src\**\*.stories.@(js|jsx|mjs|ts|tsx)
info => Starting preview..
╭─────────────────────────────────────────────────────╮
│   Storybook 7.5.3 for vue3-vite started             │
│   103 ms for manager and 222 ms for preview         │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.50.170:6006/    │
╰─────────────────────────────────────────────────────╯

$ npm install --save-dev @nuxtjs/storybook

modules: [
 '@nuxtjs/storybook',
],
storybook: {
  url: 'http://localhost:6006',
  storybookRoute: '/__storybook__',
  port: 6006,
},

$ npm run dev
> dev
> nuxt dev
Nuxt 3.8.2 with Nitro 2.8.0     
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose
ℹ 🔌  Storybook Module Setup    
ℹ 📚  Storybook is configured  
ℹ 🔗 STORYBOOK_URL : http://localhost:6006  
ℹ ✔ Storybook build done                                                                                                                        
ℹ Vite client warmed up in 1068ms   
✔ Nitro built in 390 ms    
╭─────────────────────────────────────────────────────╮
│    Storybook 7.5.3 for vue3-vite started            │
│    92 ms for manager and 356 ms for preview         │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.50.170:6006/    │
╰─────────────────────────────────────────────────────╯

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

import type { Meta, StoryObj } from '@storybook/vue3'
import Index from './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

import { foo } from '~/bar'

Failed to fetch dynamically imported module: http://localhost:6006/index.stories.ts

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

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