スキル nuxt
📦
開発者はサーバールート、ファイルベースのルーティング、ミドルウェア、プラグイン、および設定に関する Nuxt 4 のパターンに関するガイダンスが必要です。このスキルは、最新の Nuxt の規約と例を含む、漸進的なリファレンスドキュメントを提供します。
対応: Claude Codex Code(CC)
1
スキルZIPをダウンロード
2
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
3
オンにして利用開始
テストする
「nuxt」を使用しています。 Zod バリデーションを含む Nuxt 4 サーバールートを作成
期待される結果:
- ルートファイルを作成: server/api/users.ts
- Zod をインポートし、z.object() で入力スキーマを定義
- readBody() または getQuery() を使用して入力を取得
- schema.parse() でバリデーションし、エラーを返す
- 適切なステータスコードで typed response を返す
「nuxt」を使用しています。 グローバル認証ミドルウェアをセットアップ
期待される結果:
- middleware/auth.global.ts を作成
- defineNuxtRouteMiddleware() を使用して型安全性を確保
- ストアまたはセッションから auth state をチェック
- navigateTo() でリダイレクト (router.push() ではなく)
- Nuxt 4 との互換性のため default 関数をエクスポート
セキュリティ監査
安全v1 • 2/9/2026
Documentation-only skill containing markdown reference files for Nuxt 4+ development. All static findings are false positives from markdown code examples. No executable code, network calls, or credential access.
8
スキャンされたファイル
2,074
解析された行数
2
検出結果
1
総監査数
リスク要因
監査者: claude
品質スコア
45
アーキテクチャ
100
保守性
87
コンテンツ
35
コミュニティ
100
セキュリティ
91
仕様準拠
作れるもの
API エンドポイントの作成
h3 ヘルパーと Nitro パターンを使用して、バリデーション、WebSocket サポート、SSE を含むサーバールートを構築します。
ルーティングとミドルウェアの設定
ファイルベースのルーティング、ルートグループ、認証ミドルウェア、ナビゲーションガードを設定します。
Nuxt プロジェクトの設定
nuxt.config.ts をモジュール、runtime config、 auto-imports、プロジェクト layers で設定します。
これらのプロンプトを試す
サーバールートの作成
/api/users で Nuxt 4 サーバールートを作成し、バリデーション付きのユーザーリストを返す必要があります。server.md を読み込み、h3 バリデーションパターンと正しいルート構造について確認してください。
ルートミドルウェアの追加
未認証ユーザーをリダイレクトする認証ミドルウェアを追加したいです。Nuxt 4 のミドルウェアパターンとグローバル vs 名前付きミドルウェアについて確認するために、references/middleware-plugins.md を読み込みます。
Runtime Config の設定
nuxt.config.ts で runtimeConfig を設定して、サーバーサイドで環境変数にアクセスするにはどうすればよいですか？ private と public の設定に関する references/nuxt-config.md パターンを表示してください。
Nuxt コンポーザブルの使用
Nuxt ページで fetch リクエストを行う必要があります。useFetch の動作と適切な SSR 考慮事項を確認するために、references/nuxt-composables.md を読み込みます。
ベストプラクティス
- グローバルでない場合は、ルートミドルウェアには名前付きエクスポートを使用
- ミドルウェアから navigateTo() を返し、router.push() を直接使用しない
- ルートハンドラレベルで Zod スキーマを使用して API 入力をバリデーション
- SSR データフェッチとキャッシュのために useFetch() を適切なキーと共に使用
回避
- ミドルウェアで Vue 3 の router.push() を使用する代わりに navigateTo() を使用
- サーバールートで入力バリデーションをスキップする
- 適切な runtimeConfig の使用なしに、クライアントとサーバーのみのコードを混在させる
- グローバルミドルウェアに .global.ts サフィックスを使用しない
よくある質問
Nuxt 4 における名前付きミドルウェアとグローバルミドルウェアの違いは何ですか？
名前付きミドルウェアは、definePageMeta() を介して明示的に適用された場合にのみ実行されます。グローバルミドルウェアは .global.ts サフィックスを使用し、すべてのルート変更時に実行されます。すべてのルートで必要な場合にのみグローバルを使用してください。
Nuxt サーバールートで API リクエストボディをバリデーションするにはどうすればよいですか？
POST/PUT リクエストには readBody() で Zod を使用してください。z をインポートし、z.object() でスキーマを定義し、schema.parse(body) を呼び出してバリデーションします。バリデーションに失敗した場合は、エラーと共に 400 ステータスを返します。
環境変数を適切に扱うにはどうすればよいですか？
nuxt.config.ts で runtimeConfig を使用してください。private キー（サーバーのみ）は process.env.API_SECRET を使用します。public キー（クライアントアクセス可能）は process.env.PUBLIC_API_BASE を使用します。プライベートキーをクライアントバンドルに公開しないでください。
Nuxt コンポーザブルと Vue コンポーザブルの使い分けは？
Nuxt コンポーザブルは ~/composables または packages から自動インポートされます。useFetch、useRequestURL、useRuntimeConfig などの Nuxt 固有のものを使用してください。一般的な Vue パターンについては、VueUse の例を含む Vue スキルを使用してください。
Nuxt 4 の推奨プロジェクト構造は？
標準的な構造: pages/、components/、composables/、middleware/、plugins/、server/、utils/、assets/。app/ を使用して app レベルのディレクトリにします。nuxt.config.ts はプロジェクトのルートに配置します。
Nuxt 4 でルートグループを作成するにはどうすればよいですか？
フォルダ名をカッコで囲んで、(admin)/ のようにします。これによりパスセグメントを追加せずにルートグループが作成されます。共通のレイアウトやミドルウェアと一緒にルートをグループ化するのに役立ちます。
開発者の詳細
ファイル構成