2025.01.24

Nuxt3+storybook8をmonorepoで導入してみた

ちゅけ

記事内に商品プロモーションを含む場合があります

本記事の内容

はじめに
問題
解決方法
- 結論
- 手順
おわりに
参考

はじめに

私が担当しているプロダクトでは
バックエンドにrailsフロントエンドにnuxt3を利用しています。

2025年1月現在、いまだにnuxt3はドキュメントが少なく、monorepoまでサポートしている記事はほとんどありません。
storybookに関しても2024年になってからnuxt3に公式で対応したということで
導入に苦労しました。

同じような構成でstorybook8の導入に困っている人を増やさないために解説します。

プロダクト使用技術

フロントエンド app1,app2: nuxt.js ^3.14.159, typescript ^5.6.3
バックエンド api: rails 7.2.2.1 ruby 3.2.2

ファイル構成は以下のようになっています。

.
├── apps
│   ├── api
│   └── web
│       ├ package.json
│       ├ app1
│       │ └ package.json
│       └ app2
│         └ package.json
├── .git
└── docker-compose.yml

親のpackage.jsonの中身（ワークスペース設定）

  "description": "",
  "license": "ISC",
  "author": "",
  "main": "index.ts",
  "workspaces": [
    "packages/*",
    "apps/*"
  ],

問題

どこをみて導入していいかわからない。monorepoに関する情報が一切ない

まず公式っぽいものが２つほどあり、しかも言っていることがちがかったりするので
どれが正しいのかわからなかったです。

こちらの方も困っているようでした。

Zenn

外部リンク

今 Nuxt3×Vuetify に Storybook を導入するのは地獄だから辞めておけ（と思うけど...

公式っぽいもの

Nuxt

外部リンク

Storybook · Nuxt Modules

Nuxt Storybook

外部リンク

Storybook Integration for Nuxt

解決方法

結論

その２を参考にコマンドをそれぞれのFEで打ち、
.storybookを自動で生成してもらった上で、
インストールされるパッケージを親のpackage.jsonに配置してインストールし直した。

手順

以下公式を参考にインストールを進めるhttps://storybook.nuxtjs.org/getting-started/setup
app1及びapp2直下で以下のコマンドを実行する
$ app1 npx storybook@latest init
package.jsonに記載されるパッケージを親のpackage.jsonに転記する。
私の場合は以下の内容でした
"@chromatic-com/storybook": "^3.2.4", "@storybook/addon-essentials": "^8.5.0", "@storybook/addon-interactions": "^8.5.0", "@storybook/blocks": "^8.5.0", "@storybook/test": "^8.5.0", "@storybook/vue3": "^8.5.0", "@nuxtjs/storybook": "^8.3.3", "storybook": "^8.5.0",
子ディレクトリ内で生成される.storybookディレクトリはそのままにする。
子ディレクトリのnode_modulesディレクトリ削除
親ディレクトリで npm i実行
package.jsonに以下のnpmスクリプトを追記
"storybook:app1": "npm run storybook --workspace=app1"
親ディレクトリで以下のコマンドを実行
$ web npx run storybook:app1