Nuxt 4+ 開発

Nuxt 4+ プロジェクト (v4.3+) に対する段階的なガイダンス、最新のパターンと規約に対応。

使用場面

以下の場面で活躍します:

• サーバールート (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 について: ts-library スキルを使用

ファイルの読み込み

現在のタスクに基づいて、これらのリファレンスファイルの読み込みを検討してください:

• references/server.md - API エンドポイントまたはサーバーミドルウェアを作成する場合
• references/routing.md - ページ、レイアウト、またはルートグループを設定する場合
• references/nuxt-composables.md - Nuxt コンポーザブル (useFetch, useRequestURL など) を使用する場合
• references/middleware-plugins.md - ミドルウェアまたはプラグインを操作する場合
• references/nuxt-components.md - Nuxt コンポーネント (NuxtLink, NuxtImg など) を使用する場合
• references/nuxt-config.md - nuxt.config.ts を編集する場合
• references/project-setup.md - CI/ESLint/ビルドツールを設定する場合

すべてのファイルを一度に読み込まないでください。 現在のタスクに関連するファイルのみを読み込んでください。

クイックスタート

// server/api/hello.get.ts
import { z } from 'zod'

export default defineEventHandler(async (event) => {
  const { name } = await getValidatedQuery(event, z.object({
    name: z.string().default('world'),
  }).parse)
  return { message: `Hello ${name}` }
})

Nuxt 4 と旧バージョンの比較

Nuxt 4+ で作業しています。 主な違いは以下の通りです:

旧バージョン (Nuxt 2/3)	新バージョン (Nuxt 4)
<Nuxt />	<NuxtPage />
context.params	getRouterParam(event, 'name')
window.origin	useRequestURL().origin
文字列ベースのルート	ルート名を持つ型付きルーター
独立した layouts/	スロットを持つ親ルート

Nuxt 4 のパターンについて不確実な場合は、最初に関連するガイダンスファイルを読んでください。

最新ドキュメント

最新ドキュメントを取得する場合:

• ここでカバーされていない新しい Nuxt 4 機能
• モジュール固有の設定
• 破壊的変更または廃止予定の機能
• 高度なユースケース

公式情報源:

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

トークン効率

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