nuxt について
Nuxt アプリ開発に取り組むエージェント向けの Nuxt 5.x スキルです。プロジェクト構成、ルーティング、データ取得、サーバー機能、レンダリング、モジュール開発の指針をまとめ、Nuxt 5 の変更点も扱います。
主な機能
- 01Nuxt 5 のプロジェクト構成と設定
- 02ルーティングと型付きデータ取得
- 03モジュールとサーバールート
- 04レンダリングとデプロイの指針
活用シーン
- 01Nuxt 5 アプリの構築
- 02ルーティングとデータ取得の実装
- 03サーバーエンドポイントや Nuxt モジュールの開発
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/nuxtを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
GENERATION.mdreferences/advanced-hooks.mdadvanced-layers.mdadvanced-module-authoring.mdbest-practices-data-fetching.mdbest-practices-ssr.mdcore-cli.mdcore-config.mdcore-data-fetching.mdcore-deployment.mdcore-directory-structure.mdcore-modules.mdcore-routing.mdfeatures-components-autoimport.mdfeatures-components.mdfeatures-composables.mdfeatures-server.mdfeatures-state.mdrendering-modes.md詳細
Nuxt は、サーバーサイドレンダリング、ファイルベースルーティング、自動インポート、強力なモジュールシステムを提供するフルスタック Vue フレームワークです。サーバーエンジンとして Nitro を使用し、Node.js、サーバーレス、エッジプラットフォームにわたるユニバーサルなデプロイを実現します。
このスキルは Nuxt 5.x（
5.0.0-0）に基づいており、2026-09-25 に生成されました。
ディレクトリ構成： デフォルトの
srcDirはapp/です。Vue アプリのコード（app.vue、components/、composables/、pages/など）はapp/の下に配置され、server/、shared/、public/、modules/、layers/、nuxt.config.tsはプロジェクトルートに配置されます。~/@エイリアスはapp/を指します。ルートには~~/@@を使用してください。
Nuxt 5 に関する注意： Nuxt 5 では、以前は実験的だったフラグの多くがデフォルトになっています。エージェントにとって特に大きな変更点は、サーバーコードが Nitro v3（h3 v2、Web 標準の
Request/Response）に移行したこと、サーバーユーティリティはnuxt/serverからインポートする必要があり、デフォルトでは自動インポートされなくなったこと、$fetch/useFetchが 生成されたルート型に基づいて型付けされること、ルーティングがデフォルトで 大文字と小文字を区別し、型付けされること、バンドラーが Vite 8（Rolldown） になったことです。Nuxt 5 には Node22.19/24.11以降が必要です。Nitro v2 互換レイヤー（nitroLegacy）により、移行中も古いサーバーコードをビルドできます。詳細は各リファレンスを参照してください。
コア
| トピック | 説明 | リファレンス |
|---|---|---|
| ディレクトリ構成 | Nuxt 4 の app/ srcDir、shared/、エイリアス、規約 | core-directory-structure |
| 設定 | nuxt.config.ts、app.config.ts、エイリアス、Nuxt 5 のデフォルト、jiti の削除、実験的機能 | core-config |
| CLI コマンド | 開発サーバー、ビルド、生成、プレビュー、ユーティリティコマンド | core-cli |
| ルーティング | ファイルベースルーティング、大文字と小文字を区別する型付きルート、名前付きビュー、レイアウトプロパティ、ミドルウェア | core-routing |
| データフェッチ | useFetch、useAsyncData、$fetch、型付きルート、createUseFetch ファクトリー、キャッシュ | core-data-fetching |
| モジュール | Nuxt モジュールの作成と使用、Nuxt Kit ユーティリティ | core-modules |
| デプロイ | Nitro、Vercel、Netlify、Cloudflare によるプラットフォーム非依存のデプロイ | core-deployment |
機能
| トピック | 説明 | リファレンス |
|---|---|---|
| コンポーザブルの自動インポート | Vue/Nuxt コンポーザブル、カスタムコンポーザブル、shared/、useAnnouncer | features-composables |
| コンポーネントの自動インポート | コンポーネントの命名、遅延読み込み、ハイドレーション戦略 | features-components-autoimport |
| 組み込みコンポーネント | NuxtLink、NuxtPage、NuxtLayout、NuxtAnnouncer、ClientOnly など | features-components |
| 状態管理 | useState コンポーザブル、SSR に適した状態管理、Pinia 連携 | features-state |
| サーバールート | API ルート、nuxt/server のインポート、Nitro v3（h3 v2）、セッション、ミドルウェア | features-server |
レンダリング
| トピック | 説明 | リファレンス |
|---|---|---|
| レンダリングモード | ユニバーサル（SSR）、クライアントサイド（SPA）、ハイブリッドレンダリング、ルートルール | rendering-modes |
ベストプラクティス
| トピック | 説明 | リファレンス |
|---|---|---|
| データフェッチのパターン | 効率的なフェッチ、キャッシュ、並列リクエスト、エラー処理 | best-practices-data-fetching |
| SSR とハイドレーション | コンテキストの漏洩、ハイドレーションの不一致、コンポーザブルのパターンを回避 | best-practices-ssr |
高度なトピック
| トピック | 説明 | リファレンス |
|---|---|---|
| レイヤー | 再利用可能なレイヤーによるアプリケーションの拡張 | advanced-layers |
| ライフサイクルフック | ビルド時、実行時、サーバーのフック | advanced-hooks |
| モジュールの作成 | Nuxt Kit、キー付きコンポーザブル、依存関係を活用した公開可能なモジュール | advanced-module-authoring |