PlugWiki
Nuxt MCP Dev logo

Nuxt MCP Dev: Setup for Claude, Cursor and Other Apps

CommunityLocal
Getnpmnuxt-mcp-devantfu/nuxt-mcp-dev
Tools
7
6 read · 1 change
Downloads
3.5K
a week
Works in
12
apps
Risk
Medium
can write
Auth
None

Lets Claude, Cursor and other assistants see your Nuxt pages, components and config while you develop, and scaffold new files.

Nuxt MCP Dev lets Claude, Cursor and other assistants look inside your running Nuxt app. They can see your pages, components, auto-imports and config, and create new files from Nuxt templates. You add it as a Nuxt module, so it only runs while your dev server is running, and it is made by Anthony Fu rather than the Nuxt team. The README calls it experimental. By default it also writes the Nuxt docs server (nuxt.com/mcp) into the config files it updates.

Good for

  • Nuxt developers who want an assistant to know their real pages, components and auto-imports
  • Cursor, VS Code, Windsurf and Claude Code users who want the config filled in for them
  • Module authors who want to add their own tools through the mcp:setup hook

Works in

12 should work

Tap an app to see how to set it up and any known problems.

Install Nuxt MCP Dev

Claude Code

  1. 1

    Copy this prompt.

    Add the Nuxt MCP Dev server to Claude Code. Open nuxt.config.ts (create it if it does not exist) and merge in this entry, keeping any servers already there:

export default defineNuxtConfig({
  modules: ['nuxt-mcp-dev'],
})

Then tell me how to load it and whether I need to sign in.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Nuxt project, Nuxt dev server running (nuxt dev).

Add nuxt-mcp-dev to the modules list in nuxt.config.ts and start the dev server first; the server then answers at http://localhost:3000/__mcp/sse (change the port if your dev server does not use 3000). Per the README the module also writes this config file itself when it finds the folder or file already in your project. Set updateConfig to false to stop that.

From the project README. Source.

Tools

  • Lists the pages in your Nuxt app

    Returns the pages Nuxt has registered, with their routes and metadata, so the assistant knows what already exists.

    Try: “What pages does my Nuxt app have?”

    Read · list-nuxt-pages

  • Lists the components in your Nuxt app

    Returns the components Nuxt has registered so the assistant can reuse them instead of writing new ones.

    Try: “Which components can I reuse for a card layout?”

    Read · list-nuxt-components

  • Lists what Nuxt auto-imports

    Returns the functions and composables Nuxt imports automatically, so generated code uses names that really exist.

    Try: “List the composables available without an import.”

    Read · list-nuxt-auto-imports-items

  • Shows your Nuxt setup

    Returns key settings: SSR on or off, folders, aliases, public runtime config, installed modules, import and component settings.

    Try: “Which modules are installed in this Nuxt project?”

    Read · get-nuxt-config

  • Shows your Vite setup

    Returns a summary of the Vite config: project root, resolve settings, plugin names and environment names.

    Try: “Which Vite plugins is this app using?”

    Read · get-vite-config

  • Shows how Vite sees one file

    Given a file path, returns what imports it, what it imports, and its compiled output from the Vite module graph.

    Try: “What imports components/AppHeader.vue and how does Vite compile it?”

    Read · get-vite-module-info

  • Creates a new Nuxt file from a template

    Runs the Nuxt add command to create a page, component, layout, composable, plugin, API route or other file in your project.

    Try: “Scaffold a layout called dashboard.”

    Write · nuxt-scaffold

Read from the source code

Permissions

medium risk · 5 things to watch

Medium risk

Most tools only read your app's structure, but nuxt-scaffold creates files and the module rewrites MCP config files on startup. Use it in a git-tracked project and check the diff after the assistant scaffolds anything.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • nuxt-scaffold creates files in your project

    The assistant can add pages, components, plugins, API routes and more through the Nuxt add command. Review the changes in git before you commit. github.com

  • It edits MCP config files for you

    On startup it writes .cursor/mcp.json, .vscode/mcp.json or .mcp.json in your project when that folder or file already exists, and the global Windsurf config in your home folder when ~/.codeium/windsurf exists. Set updateConfig to false to stop this. github.com

  • It adds the Nuxt docs server to your configs

    includeNuxtDocsMcp defaults to true, so https://nuxt.com/mcp is written next to the local entry. Set it to false if you do not want that. github.com

  • Marked experimental by its author

    The README says: Experimental. Use with caution. Use it in local development only. github.com

  • Only reachable while the dev server runs

    The endpoint is part of the Nuxt dev server. Our advice: do not start the dev server on a shared network address while this module is on. github.com

Security advisories

No published security advisories as of Nov 1, 2026.

Technical details
Turning on read-onlyNo read-only switch is documented. Setting updateConfig: false in the module options stops it editing config files, but nuxt-scaffold stays available.
Sign-in and keysNo sign-in. The endpoint is served by your Nuxt dev server at /__mcp/sse.

Questions

Is Nuxt MCP Dev official?

No. It is a community project by Anthony Fu (antfu), not published by the Nuxt team. It does add the Nuxt team's docs server, nuxt.com/mcp, to your config by default.

How do I add it to my assistant?

Add nuxt-mcp-dev to the modules list in nuxt.config.ts, then start the dev server. The install box above shows the address to give your app, and the module can also write the config for Cursor, VS Code, Windsurf and Claude Code.

What is the server address?

http://localhost:3000/__mcp/sse when your dev server uses port 3000. The port follows your dev server.

Does it need an API key?

No. It runs inside your own Nuxt dev server and has no account or key.

Does it work when the dev server is stopped?

No. The tools exist only while nuxt dev is running, so start it before you ask the assistant anything.

Can it change my project?

Yes, in one way. nuxt-scaffold creates new files from Nuxt templates. The other six tools only read.

Which assistants work with it?

Any app that can connect to an SSE address. Claude Desktop, Codex and some others need the mcp-remote bridge, as shown in the install box. Cursor, VS Code, Windsurf and Claude Code can be filled in by the module.

Is the plain vite-plugin-mcp the same thing?

It is the Vite version of the same idea. Nuxt MCP Dev builds on it and adds the Nuxt tools: pages, components, auto-imports, config and scaffolding.

Information

updated Nov 2, 2026

Publisher
Community
Package
nuxt-mcp-dev
Registry
npm
Transport
SSE
Auth
None
Version
0.3.2
License
MIT
Last commit
Mar 1, 2026

GitHubnpmChangelogIssues

Sources

Docs, issue trackers and discussions this page is built from. Issues, quotes and findings above link to their own source.

Show all 6
  1. github.com · github.com
  2. github.com · github.com
  3. github.com · github.com
  4. github.com · github.com
  5. github.com · github.com
  6. github.com · github.com

Facts from the official MCP registry, GitHub, npm, PyPI and the Docker catalog. Updated Nov 2, 2026.