mcpField
N
nuxt

nuxt

github.com/onmax開発7238.6k 回インストール1 日前に更新
リポジトリ

nuxt について

nuxtは、Nuxtを扱う開発者やコーディングエージェント向けのフレームワーク参照スキルです。Nuxt 5.xを基に、アプリ構成、ルーティング、データ取得、レンダリング、デプロイと主な変更点を解説します。

主な機能

  1. 01Nuxt 5のディレクトリと設定のリファレンス
  2. 02ファイルベース・型付きルーティング
  3. 03データ取得とキャッシュのパターン
  4. 04SSR、SPA、ハイブリッドレンダリング
  5. 05Nitroのサーバールートとデプロイ
  6. 06モジュール、レイヤー、ライフサイクルフック

活用シーン

  1. 01Nuxtアプリのディレクトリ構成の設定
  2. 02ルーティングとサーバー側データ取得の実装
  3. 03アプリのレンダリング方式の選択
  4. 04複数プラットフォームへのアプリのデプロイ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/onmax/nuxt-skills --skill nuxt

インストール後、Claude Code で/nuxtを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
advanced-hooks.md
advanced-layers.md
advanced-module-authoring.md
best-practices-data-fetching.md
best-practices-ssr.md
core-cli.md
core-config.md
core-data-fetching.md
core-deployment.md
core-directory-structure.md
core-modules.md
core-routing.md
features-components-autoimport.md
features-components.md
features-composables.md
features-server.md
features-state.md
rendering-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 には Node 22.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
ルーティングファイルベースのルーティング、大文字と小文字を区別する型付きルート、名前付きビュー、レイアウトの props、ミドルウェアcore-routing
データ取得useFetch、useAsyncData、$fetch、型付きルート、createUseFetch ファクトリー、キャッシュcore-data-fetching
モジュールNuxt モジュールの作成と使用、Nuxt Kit ユーティリティcore-modules
デプロイNitro、Vercel、Netlify、Cloudflare を使ったプラットフォーム非依存のデプロイcore-deployment

機能

トピック説明リファレンス
コンポーザブルの自動インポートVue/Nuxt のコンポーザブル、カスタムコンポーザブル、shared/、useAnnouncerfeatures-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

コメント

Markdown 対応