Nuxt 3 (RC4) に `sb init` を使って Storybook が導入できた

現時点でStorybookはNuxt3非対応ですが、可能な限りゼロコンフィグで導入できないか色々試しました。

今回、導入に成功しましたが、ユースケースやRCのバージョン相違によっては動作しない可能性があります。

内容は、投稿時点のもので、今後変わる可能性があります。

大まかな手順

• Nuxt3 プロジェクトを作る
• Vue3 用の Storybook を Nuxt3 プロジェクトにインストールする（ハマりどころあり）

Nuxt3 プロジェクトを作る

Nuxt3 の Quick Start の手順通りに実行。

npx nuxi init nuxt3-storybook
cd nuxt3-storybook
yarn
yarn dev -o

これで localhost:3000 を見れば Welcome ページが表示されていることを確認。
動作確認用のコンポーネントと Story を用意しておいた。

components/Hello/Hello.vue

<template>
  <h1>hello</h1>
</template>

components/Hello/index.stories.js

import Hello from './Hello.vue';

export default {
  component: Hello,
};

export const Test = () => ({
  components: { Hello },
  setup() {
    return {};
  },
  template: `
    <hello />
  `,
});

Storybook を導入する

1. Vue3 プロジェクトであることを sb init に知らせるため Vue3 をインストール → 失敗

yarn add -D vue@next
npx sb init

思惑通りそれっぽいパッケージはインストールされるが、起動しないので、 Nuxt3 インストール直後まで切り戻し。

2. sb init のオプションで vue3 を指定 → 1よりはマシだが失敗

https://github.com/nuxt-community/storybook/issues/330 こちらによると、 強制的にライブラリの依存系を使うことができるようです。

npx sb init --type vue3

結果は、１と同じ。切り戻し。

3. Stoybook のビルダーを vite にする → なんかうまくいきそうだったが失敗

sb init で構築される設定だと Webpack 5 が使われる一方で、 Nuxt3 はデフォルトだと Vite が使われるため、不整合が発生している事がわかった。よって、 まず 2 の手順で Storybook をインストールし、ビルダーを vite に変えてみた。

yarn add -D @storybook/builder-vite

.storybook/main.js

module.exports = {
  // 略
  core: {
    builder: '@storybook/builder-vite'
  }
}

これを追記の上、 Storybook を起動。 Storybook の画面表示まで至ったが、ずっとローディングでエラーも出ている。だいぶ近づいてきた感。１まで切り戻し。

4. sb init 時点で vite を指定する → 動いた

--type と同様に、ビルダーも設定時点で指定できたので、指定する。

npx init --type vue3 --builder @storybook/builder-vite

Storybookが無事起動。対象 Story がデフォルトの main.js の設定だと読まれないので、以下の通り変更して Storybook を再起動。

.storybook/main.js

module.exports = {
  "stories": [
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  // 以下略
}

できました。

5. Story ファイルを TypeScript で書いてみる

脳死で components/Hello/index.stories.js → components/Hello/index.stories.ts に変更したけどちゃんと見れた。

以上です。 Storybook の Nuxt3 正式対応が待ち遠しいですね。