nuxt

Nuxt 4+ 開発

最新のパターンと規約に基づいた、Nuxt 4+ プロジェクト向けの段階的なガイダンスです。

使用する場面

次の作業を行う場合：

• サーバールート（API エンドポイント、サーバーミドルウェア、サーバーユーティリティ）
• ファイルベースのルーティング（ページ、レイアウト、ルートグループ）
• Nuxt ミドルウェア（ルートガード、ナビゲーション）
• Nuxt プラグイン（アプリの拡張機能）
• Nuxt 固有の機能（自動インポート、レイヤー、モジュール）

利用可能なガイダンス

現在の作業に応じて、該当するファイルを読みます：

• references/server.md - API ルート、サーバーミドルウェア、バリデーション（Zod）、WebSocket、SSE
• references/routing.md - ファイルベースのルーティング、ルートグループ、型付きルーター、definePage
• references/middleware-plugins.md - ルートミドルウェア、プラグイン、アプリのライフサイクル
• references/nuxt-composables.md - Nuxt コンポーザブル（useRequestURL、useFetch、ナビゲーション）
• references/nuxt-components.md - NuxtLink、NuxtImg、NuxtTime（HTML 要素より優先してください）
• references/nuxt-config.md - 設定、モジュール、自動インポート、レイヤー

Vue コンポーザブルについて： vue スキルの composables.md を参照してください（VueUse、Composition API のパターン） UI コンポーネントについて： nuxt-ui スキルを使用してください データベース／ストレージについて： nuxthub スキルを使用してください コンテンツ中心のサイトについて： nuxt-content スキルを使用してください モジュールの作成について： nuxt-modules スキルを使用してください プロジェクトのスキャフォールディング／CI について： personal-ts-setup スキルを使用してください

使用パターン

段階的な読み込み — 必要なものだけを読みます：

• API エンドポイントを作成する場合 → references/server.md
• ページ／ルーティングを設定する場合 → references/routing.md
• コンポーザブル／データ取得を使用する場合 → references/nuxt-composables.md
• ミドルウェア／プラグインを追加する場合 → references/middleware-plugins.md
• Nuxt を設定する場合 → references/nuxt-config.md
• CI／ESLint を設定する場合 → references/project-setup.md

すべてのファイルを一度に読まないでください。 状況に応じて読み込みます：

• server/ で作業する場合 → server.md を読みます
• pages/ または layouts/ で作業する場合 → routing.md を読みます
• useFetch、useRequestURL、ナビゲーションを使用する場合 → nuxt-composables.md を読みます
• <a>、<img>、<time> 要素を使用する場合 → nuxt-components.md を読みます
• middleware/ または plugins/ で作業する場合 → middleware-plugins.md を読みます
• nuxt.config.ts を編集する場合 → nuxt-config.md を読みます

Nuxt 4 と旧バージョンの違い

Nuxt 4+ を使用しています。 主な違い：

旧版（Nuxt 2/3）	新版（Nuxt 4）
<Nuxt />	<NuxtPage />
context.params	getRouterParam(event, 'name')
window.origin	useRequestURL().origin
文字列ルート	ルート名を使った型付きルーター
個別のレイアウト／	<slot> を持つ親ルート

Nuxt 4 のパターンがわからない場合は、まず該当するガイダンスファイルを読んでください。

最新のドキュメント

最新のドキュメントを取得する場面：

• ここで扱っていない Nuxt 4 の新機能
• モジュール固有の設定
• 破壊的変更や非推奨化
• 高度なユースケース

公式ソース：

• Nuxt：https://nuxt.com/docs
• h3（サーバーエンジン）：https://v1.h3.dev/
• Nitro：https://nitro.build/

トークン効率

メインスキル：約300トークン。各サブファイル：約800～1500トークンです。現在の作業に関連するファイルだけを読み込んでください。