Nuxt MCP Server
Nuxt MCPサーバーでClaude連携・Vueアプリケーション開発を自動化
最終更新：2026年3月25日60,188GitHub
クイックインストール
npx nuxt-mcp概要
Nuxt MCP Serverの設定方法と使い方。
Vue.jsフレームワーク「Nuxt」をClaudeから操作できるMCPサーバー。
Nuxtプロジェクトの構成確認・モジュール情報の参照・コンポーネント・ページ・APIルートの管理が可能。
ClaudeとNuxtのMCPサーバー連携により、Nuxtプロジェクトのコード生成・設定最適化・デバッグを自動化できる。
設定方法はローカルのNuxtプロジェクトディレクトリを指定するだけでシンプルに完結する。
料金・APIキー情報
料金
完全無料APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
ClaudeがNuxtプロジェクトの構成を把握してコンポーネントやページを自動生成できる
Nuxtのモジュール設定・nuxt.configをClaudeが最適化・修正できる
NuxtのAPIルートをClaudeが設計・実装してエンドポイントを素早く追加できる
Nuxtのビルドエラーやルーティング問題をClaudeがプロジェクト構成を見て解決できる
セットアップ手順
- 1
Nuxtプロジェクトのルートディレクトリのパスを確認する（例：/Users/username/my-nuxt-app）
- 2
claude mcp add nuxt -e NUXT_PROJECT_PATH=/path/to/project -- npx -y nuxt-mcp
設定ファイル
⚠️
コピー前に確認
Node.js 18以上とNuxtプロジェクトが必要。Nuxt 3（nuxt.config.ts）対応。
Terminal
claude mcp add nuxt -e NUXT_PROJECT_PATH=/path/to/your/nuxt/project -- npx -y nuxt-mcp#Nuxt#Vue.js#フレームワーク#フロントエンド#SSR#フルスタック