Nuxt3にStorybookを導入する方法

はじめに

2023年9月20日、Nuxt3用のStorybookモジュールであるnuxt/storybookのv7.0.0がリリースされ、Nuxt3に対応しました 🎉

この記事では、nuxt/storybook モジュールを使用して、Nuxt3 プロジェクトに Storybook を導入する方法をまとめています。
また、Nuxt3 プロジェクトで頻繁に使用されている Pinia と TailwindCSS を導入して、Storybook 上で動作するかについても確認しました。

背景

nuxt/storybook は元々、Nuxt2 用に作成されており、しばらくの間は Nuxt3 には対応していませんでした。

Nuxt モジュールを使用せず、Nuxt3 に Storybook をインストールすることも可能ではありましたが、設定が必要な項目が多く、他のモジュールを入れたときにエラーが出ることが多々ありました。

私自身も何度かトライしてみましたらが、エラーが解消しなかったため Storybook 自体の導入を見送っていた状態でした。

そして 2023年9月20 日、ついにNuxt3 に対応した nuxt/storybook モジュールの v7.0.0 がリリースとなりました。

Nuxt3 用の nuxt/storybook の導入により、Storybook を導入する手順がどのように変化したか、そして導入時の注意点についてまとめていきます。

手順

実行環境

実行環境は以下の通りです。

Nuxt3 プロジェクトの作成

まずは、Nuxt3 プロジェクトを作成します。

カレントディレクトリに展開するように、以下のコマンドを実行します。

開発環境を起動します。

http://localhost:3000/ にアクセスすると初期画面が表示されました。

Nuxt3の初期画面

Storybook の導入

Storybook のインストール

次に Storybook モジュールをインストールします。

以下の処理がまとめて実行されました。

• 必要なパッケージのインストール
• package.json へ storybook 起動用コマンドの追記
• nuxt.config.ts へモジュール読み込みの追記
• .storybook/main.ts と .storybook/preview.ts の作成
• stories ディレクトリの生成（コンポーネントと Story ファイルのサンプル）
• Storybook の起動

http://localhost:6006/ をブラウザで開きます。

ブラウザコンソールにエラー

ブラウザコンソールに以下のエラーが表示されました。

stories ディレクトリの指定方法に誤りがあるようなので修正します。

.storybook/main.ts

一度 Ctrl + C で Storybook を終了した後に、pnpm run storybookコマンドで再度起動します。

Storybookの起動を確認

Storybook の起動を確認できました 🎉
Vue.js や Nuxt の API、コンポーネントの自動インポートも機能しています。

コマンド一発で設定がほぼ完了するのは素晴らしいですね。

ただし、新規にコンポーネントを作成した場合は、Storybook を再起動しないと読み込まなかったため注意が必要です。
（作成済みのコンポーネントを編集した場合の HMR は有効でした。）

Pinia の導入

Pinia は Vue 用の状態管理ライブラリです。
Pinia を使用する場合も、Storybook が正常に動作するか確認してみます。

Pinia のインストール手順

Pinia モジュールをインストールします。

nuxt.config.ts を書き換えます。

ストアを作成します。

stores/useCounterStore.ts

コンポーネント側からストアを呼び出します。

ブラウザコンソールにエラーが出ました。

Pinia の初期化がうまくいっていないようです。
.storybook/preview.ts に以下を追加します。

Storybook を再起動します。

ストア変数が表示された

ストアから呼び出した変数が表示されました 🎉

TailwindCSS の導入

TailwindCSS はユーティリティファーストの CSS フレームワークです。
TailwindCSS を使用する場合も、Storybook が正常に動作するか確認してみます。

TailwindCSS のインストール手順

TailwindCSS モジュールをインストールします。

nuxt.config.tsを書き換えます。

TailwindCSS の初期化を行います。

./tailwind.config.jsが作成されます。

components ディレクトリへの移行

Storybook の初期化時に生成されるコンポーネントはstoriesディレクトリ内に生成されます。
しかし、stories ディレクトリは TailwindCSS のデフォルトソースパスに含まれていません。

また、実際のプロジェクトでは components にコンポーネントを配置するので、サンプルコンポーネントである MyWelcome.vue を components ディレクトリに移動します。

Story ファイルのインポートを修正します。

コンポーネントに TailwindCSS のクラスを付与してみます。

Storybook を再起動した後に、ブラウザで確認してみます。

bg-blue-50が有効になっている

TailwindCSS のクラスである bg-blue-50 が有効になっていることを確認できました。

まとめ

今回は新しくリリースされたnuxt/storybookのv7.0.0使用した Storybook の導入方法についてまとめました。

Storybook の設定がコマンドひとつで完了するようになっており、想像以上に Storybook の導入は簡単になっていました。
また、Nuxt3 プロジェクトにはかかせない Pinia や TailwindCSS のモジュールの導入もスムーズに行うことができるのもありがたいです。

ただし、記事内に記載しましたが、公式のドキュメントのままの手順だとエラーになる部分がありました。
また、公式の Examples にある Pinia と Vuetifyが Not Found になっていました。
まだ、リリースされて日が浅いので、今後のアップデートで改善されていくかもしれません。
アップデートがあれば記事も修正していきます。

以上、お役に立てれば幸いです。

参考

• nuxt/storybook