🚗

Nuxt4 + Turborepo + PrimeVue でモノレポ環境を作る

2025/08/17に公開

Nuxt4でモノレポ環境を構築した際、TurborepoとPrimeVueも導入したのでその手順の記録です。

環境構築で使ったもの

Nuxt4
Turborepo
PrimeVue
pnpm
PowerShell
VS Code

まず、モノレポとTurborepoについて解説し、その次に手順を記載しています。

モノレポとは？

モノレポ（Monorepo）とは、関連する複数のプロジェクトやサービスのソースコードを単一のリポジトリで管理する手法です。一方、プロジェクトごとに個別のリポジトリを作成して管理する方法はポリレポ（Polyrepo）と呼ばれます。

この記事が分かりやすかったです。

モノレポにはpnpm

モノレポ環境では、pnpmを使用するのが良いそうです。pnpmはnpmやyarnと違い、パッケージの実体は1つで、各プロジェクトのnode_modulesは実体へのリンク（シンボリックリンク）を置くという特徴があります。

他にも、依存関係の管理がより厳格であること、モノレポ内のパッケージ管理を簡単にする「ワークスペース機能」が備わっていることなどから、モノレポに向いていると言われているそうです。

Turborepoとは？

Turborepoは、Vercel社によって開発されたモノレポ向けツールです。公式ドキュメントによると

Turborepoは、JavaScriptおよびTypeScriptコードベース向けの高性能ビルドシステムです。モノレポのスケーリング向けに設計されており、単一パッケージワークスペースでのワークフローも高速化します。

とのことです。

キャッシュを用いた効率的なビルド

Turborepoの大きな特徴として、キャッシュを利用する点が挙げられます。一度実行したタスクをローカル環境にキャッシュ（保存）しておき、次に同じタスクを実行する際、ソースコードに変更がなければタスクをスキップします。これにより、例えば変更があったプロジェクトだけを再ビルドする、つまり待ち時間の短縮が期待できます。

タスクパイプラインの定義

Turborepoでは、プロジェクト間の依存関係やタスクの実行順序を、turbo.jsonという一つの設定ファイルで簡単に定義できます。
これにより、正しい順序で効率的にタスクを実行してくれるそうです。

詳細は公式ドキュメントをご覧ください。

https://turborepo.com/docs

モノレポ環境構築手順

前置きが長くなりましたが、ここから環境構築手順を解説していきます。
このような構成で作ります。

my-monorepo/
├── app                     # ユーザー向けNuxt   
│   ├── nuxt.config.json        # appの設定
│   └── package.json            # appの設定
├── backoffice/             # 管理者向けNuxt
│   ├── nuxt.config.json        # backofficeの設定
│   └── package.json            # backofficeの設定
├── packages/
│   └── ui/                 # 共通UIコンポーネント
│       ├── nuxt.config.json    # PrimeVueの設定
│       └── package.json        # PrimeVueの設定
├── pnpm-workspace.yaml
├── turbo.json
└── package.json

1.pnpmインストール

もしまだpnpmを入れていなければ下記を実行

npm install -g pnpm

入っているか確認

pnpm -v

2.モノレポの初期化

mkdir my-monorepo
cd my-monorepo
pnpm init

3.ワークスペース設定

pnpm-workspace.yamlを作成する

pnpm-workspase.yaml

packages:
  - 'apps/*'
  - 'packages/*'

4.Turborepoの導入

pnpm add -D turbo -w

package.json（ルート）

package.json

{
  "name": "my-monorepo",
  "scripts": {
    "dev": "turbo run dev --parallel",
    "dev:app": "turbo run dev --filter=app",
    "dev:backoffice": "turbo run dev --filter=backoffice",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "packageManager": "pnpm@10.14.0",
  "devDependencies": {
    "turbo": "^2.5.6"
  },
  "workspaces": [
    "app",
    "backoffice",
    "packages/*"
  ]
    //その他、各種設定
}

turbo.jsonを作成

turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "dev": {
      "cache": false,
      "persistent": true
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".output/**", ".nuxt/**"]
    },
    "lint": {
      "outputs": []
    }
  }
}

5.Nuxtプロジェクト作成（app,backoffice）

Nuxt4の導入

pnpm create nuxt-app app
pnpm create nuxt-app backoffice

appとbackofficeのpackage.jsonのnameを書き換える

app側のnameはapp
app側のnameはbackoffice

6.共通パッケージの作成

mkdir packages/ui
cd packages/ui
pnpm init

7.PrimeVueの導入

Packages/uiに入れます。

pnpm add primevue @primeuix/themes
pnpm add -D @primevue/nuxt-module

PrimeIconsも入れておきます。

pnpm add primeicons

/packages/ui/package.json

{
  "name": "ui",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "packageManager": "pnpm@10.14.0",
  "dependencies": {
    "@primeuix/themes": "^1.2.3",
    "primeicons": "^7.0.0",
    "primevue": "^4.3.7",
    "sass": "^1.90.0"
  },
  "devDependencies": {
    "@primevue/nuxt-module": "^4.3.7"
  }
  //その他、各種設定
}

nuxt.config.ts(packages/ui)にPrimeVueの記述をします。
テーマは一旦 Aura にしてみました。

packages/ui/nuxt.config.ts

import Aura from '@primeuix/themes/aura';
export default defineNuxtConfig({
    modules: ['@primevue/nuxt-module'],
    primevue: {
        /* Configuration */
        usePrimeVue: true,
        options: {
            theme: {
                preset: Aura,
            },
            ripple: true
        },
        components: {
            include: '*' // すべてのコンポーネントをグローバルにインポート（便利ですが、本番環境では必要なものだけに絞るのが推奨されます）
        }
    },
    css: [
        'primeicons/primeicons.css' // アイコンCSS
    ]    
})

appとbackofficeのnuxt.config.tsに継承

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  extends: ['../packages/ui'],
  // その他設定があれば記述
})

8.ページ作成

app,backofficeそれぞれのpages/app.vueなどで、PrimeVueを使ったページを作成します。

例）

app/pages/app.vue

<template>
  <div>
    <h1>Welcome to PrimeVue on Nuxt!</h1>
    
    <div>
      <Button label="Submit" icon="pi pi-check" />
    </div>
  </div>
</template>

9.インストール＆実行

ルートにて

pnpm install #全体の依存をインストール
pnpm dev #両方同時に起動

ルートのpackage.jsonのscriptsで指定しているので、pnpm devでappとbackofficeを同時に起動することができます。
また、片方ずつ立ち上げる指定もしているため、

pnpm dev:app
pnpm dev:backoffice

で片方だけ立ち上げることも可能です。本来ならappまたはbackofficeに移動してからpnpm devする必要があるので移動しなくていい分楽です。

このような形で、無事開発画面を立ち上げることができました。

まとめ

Nuxt4でモノレポ環境を作ることができました。Turborepoは今回調べていて初めて知ったのですが、複数プロジェクトを同時に立ち上げることができたり便利だと思いました。Vercel社開発なので、Vercelにデプロイする際に特に効果があるようです。デプロイも試してみてまた記事にできたらと思います。

追記

デプロイの記事を書きました。

GitHubで編集を提案