Claude Code × Nuxt.js｜DevTools 連携とスキル設定の使い方

Claude Code が Nuxt 開発と相性が良い理由

Nuxt.js は設定ファイル（nuxt.config.ts）一つで SSR・SSG・SPA を切り替えられる柔軟なフレームワークだ。その反面、Nuxt 独自の auto-imports や composable の仕様、ファイルベースルーティングの作法など、知識として持っていないと誤ったコードを生成しやすい側面がある。

Claude Code は 2025 年以降、スキルや MCP（Model Context Protocol）を通じて外部知識を取り込める仕組みを整えた。これを利用することで、Nuxt 固有のベストプラクティスを Claude Code に持たせることが可能になった。

2024 年リリースの Nuxt 4 では app/ ディレクトリへの移行という大きな変更があり、Nuxt 3 時代の構成で生成されたコードは v4 プロジェクトで動かない場面が多い。この問題を解決するために、「Nuxt 4 の知識を Claude Code に持たせる」というニーズが特に高まっている。

nuxt-claude-devtools：DevTools パネルから Claude Code を呼び出す

Nuxt.js の公式モジュールディレクトリに掲載されている @oro.ad/nuxt-claude-devtools（Nuxt Modules）は、Nuxt DevTools のパネル内から Claude Code に話しかけられる統合モジュールだ。

主な機能

• ストリーミング応答：生成されるコードや説明がリアルタイムに流れてくる。長い回答も待たずに確認できる
• 音声入力：マイクで話しかけることで、キーボードを打たずに指示を出せる
• ファイル添付：エラーログ、設定ファイル、型定義などを添付してまとめて相談できる
• セッション管理：会話履歴を保持し、前回の文脈を引き継いだまま作業を継続できる
• Vue コンポーネントの自動コンテキスト送信：DevTools で表示中のコンポーネントのコードが、自動的に Claude Code へのコンテキストとして添付される

最後の「自動コンテキスト送信」が特に強力だ。わざわざコードをコピー&ペーストしなくても、「このコンポーネントを Composition API に書き直して」と指示するだけで、Claude Code は対象ファイルのコード全体を把握したうえで回答を生成してくれる。

インストール手順

1. npm で依存関係をインストールする。

   npm install -D @oro.ad/nuxt-claude-devtools
   

2. nuxt.config.ts の modules 配列に追加する。

   export default defineNuxtConfig({
     modules: ['@oro.ad/nuxt-claude-devtools']
   })
   

3. npm run dev でローカルサーバーを起動し、ブラウザ下部に表示される Nuxt アイコンをクリックして DevTools を開く。
4. DevTools パネルの中に「Claude」タブが表示されるので、Claude.ai アカウントでログインして利用を開始する。

開発環境（devtools: { enabled: true }）でのみ動作するため、本番ビルドには含まれない。セキュリティ上の懸念が少ない点もメリットだ。

Claude Code スキルで Nuxt 4 の知識を強化する

MCP Market で公開されている「Nuxt 4 Core」スキル（mcpmarket.com）は、Claude Code に Nuxt 4 のベストプラクティスを持たせるための拡張だ。

このスキルで Claude Code が習得する内容

Nuxt 4 で大きく変わった主要ポイントを Claude Code に教え込むことで、生成されるコードの品質が向上する。

• app/ ディレクトリへの移行：Nuxt 4 では pages/・components/ などのディレクトリが app/ 配下に移った。旧構成でのコード生成を防ぐ
• ファイルベースルーティングの v4 仕様：app/pages/ 配下のファイル名がルートになるルールを正確に把握させる
• SSR / SSG / SPA 設定の使い分け：ssr: false や target: 'static' などの設定を適切に提案できるようになる
• useAsyncData と useFetch の推奨使い分け：SSR 文脈での非同期データ取得に関する v4 の推奨パターンを適用する
• Nitro ルーティングと API ハンドラー：server/api/ ディレクトリ配下のハンドラー作成ルールを正確に把握させる

適用方法

Claude Code のプロジェクトルートに .claude/ ディレクトリがなければ作成し、そこにスキル設定を配置する。あるいは ~/.claude/skills/ にグローバルスキルとして登録すれば、すべての Nuxt プロジェクトで共通利用できる。

スキル適用後は、「Nuxt 4 の構成で認証ページを作って」と指示するだけで、v4 の正しいディレクトリ構成と API ハンドラーが生成される。Nuxt 3 の古いパスではなく app/ ベースの構成でコードが返ってくることが確認できる。

Nuxt MCP は必要か？使い分けの考え方

Nuxt.js 公式は MCP サーバーを提供しており、Claude Code からアクセスできる。しかし開発者の Alex Op は「Claude Code を使うなら Nuxt MCP は不要」と主張している。

その主な理由は コンテキストの肥大化 だ。Nuxt MCP を接続すると、Nuxt のドキュメント全体が Claude Code のコンテキストウィンドウに読み込まれてしまう。コンテキストが大きくなるほど応答が遅くなり、処理コストも上がる。

Alex は代替として、Nuxt ドキュメントサイトを直接参照するカスタム設定を活用することを推奨している。必要なときだけ特定のページを読み込む方が、常時 MCP を接続するより軽量で効率的だという考え方だ。

ただし Nuxt MCP にも利点はある。チーム全員が同じ知識ベースを持つためのセットアップコストを下げたい場合や、Nuxt 公式の最新情報をリアルタイムで参照したい場合は、MCP を選ぶ判断もある。

目的別の選択目安

実践：Claude Code × Nuxt でよく使われる指示パターン

実際の開発現場で効果的な指示の出し方をいくつか紹介する。

コンポーネントの書き換え

nuxt-claude-devtools を使い、対象コンポーネントを DevTools で開いた状態で「Options API を Composition API の <script setup> 形式に書き直して。TypeScript の型推論は維持して」と伝えると、現在のコードを参照した適切な変換案が返ってくる。

ページコンポーネントの SEO 最適化

useHead() や useSeoMeta() を活用した Meta タグ設定を自動生成させる際は、「このページで使うべき useSeoMeta() の設定を、ページタイトルと description の例つきで書いて」と具体的に指定すると精度が上がる。

API ルートの追加

「server/api/users/[id].get.ts を作って。ユーザー ID をパスパラメータで受け取り、データベースから取得して返す」という指示で、Nitro のハンドラー形式で正しいコードが生成される。Nuxt 4 スキルが適用されていれば defineEventHandler の書き方も最新の推奨形式になる。

エラーデバッグ

ターミナルに出力されたスタックトレースをコピーして貼り付け、「このエラーの原因と修正方法を教えて。Nuxt 4 の構成です」と前置きすると、Nuxt 固有のエラーに対する具体的な解決策が得られる。

nuxt.config.ts の最適化

「プロジェクトの現在の nuxt.config.ts を見て、パフォーマンスの改善点を提案して」と依頼することで、モジュールの読み込み順や不要な設定項目の整理について助言を受けられる。

Nuxt × Claude Code 活用時の注意点

実際に使う中で踏みやすいポイントを挙げる。

• バージョンを明示する習慣をつける：Nuxt 3 と Nuxt 4 では API が大きく異なる。指示の冒頭に「Nuxt 4 のプロジェクトです」と一言入れるだけで、生成コードのバージョン誤りが減る
• auto-imports について明示する：Nuxt の auto-imports により、ref や computed などの Vue 関数は import 文なしで使える。「import は不要、Nuxt が自動補完します」と伝えると不要な import 文の混入が防げる
• $fetch と useFetch の違いを指定する：SSR 環境かクライアントサイドのみかによって使うべき関数が異なる。「サーバーサイドで実行するため useAsyncData を使って」のように文脈を明示すると精度が上がる
• 本番ビルドでの動作検証は別途行う：Claude Code が生成したコードは開発環境では動いても、nuxt build 後の本番では型エラーや SSR の挙動差が出ることがある。必ず nuxt build && nuxt preview で最終確認する
• GitHub PR #33498 のスキルアップデートを確認する：Nuxt 公式リポジトリでは Claude Code 向けスキルの改善 PR（#33498）が進行中だ。最新版をトラッキングすることで、Claude Code の Nuxt 知識を最新状態に保てる

まとめ

Claude Code と Nuxt.js を連携させる方法は大きく 3 つある。

1. nuxt-claude-devtools で DevTools パネルから対話的に Claude Code を使う
2. Nuxt 4 Core スキルを適用して Claude Code の知識ベースを最新仕様に更新する
3. Nuxt MCP で最新ドキュメントへのリアルタイムアクセスを確保する

個人開発で今日から試したいなら nuxt-claude-devtools の導入が最もコストが低く、即効性も高い。Nuxt 4 移行案件を抱えているなら Nuxt 4 Core スキルの適用は必須といえる。チーム全体で Claude Code の活用を統一したいなら、MCP とスキルを組み合わせることで強力な開発環境が構築できる。

Nuxt.js と Claude Code の連携エコシステムは 2026 年に入ってから急速に充実し始めており、今後さらに多くのモジュールや統合機能が登場することが期待される。