Nuxt MCP server: code graph for AI agents
TL;DR. Which Nitro server API routes and shared composables does a Nuxt page depend on? trace-mcp indexes your existing Nuxt 3/4 repository into a local static code graph. AI coding agents resolve un-imported composables, file-based pages/ routes, and string-literal useFetch targets through MCP instead of manually reconstructing framework conventions.
What trace-mcp extracts in Nuxt
Nuxt projects combine Vue frontend architecture with Nitro server routes. The nuxt plugin extracts:
- File-Based Routing: Full route tree extraction from
pages/(and Nuxt 4app/pages/), handling dynamic parameters ([id]), catch-alls ([...slug]), and nested routes. - Nitro Server API Routes: Endpoint mapping from
server/api/(e.g.,server/api/users.get.ts→GET /api/users), middleware, and server utilities. - Auto-Imports: Resolution of implicit globals in
composables/,utils/, andserver/utils/without requiring explicit import statements in.vuefiles. - Data Fetching Connections: Extraction of static URL string literals in
useFetchanduseAsyncDatacalls, linking frontend pages to matching server API route handlers. - Layouts & Middleware: Mapping between page front-matter /
definePageMetadeclarations and files inlayouts/andmiddleware/. - Nuxt 3 & Nuxt 4 Compatibility: Full detection of Nuxt 4 compatibility mode,
app/folder hierarchies, and configuration settings.
Installation & Quickstart
Install trace-mcp globally, run initialization, and connect your Nuxt repository:
npm i -g trace-mcp && trace init && trace add
Example question to your agent
“Which Nitro API routes in
server/api/are called bypages/checkout/[id].vue, and what shared composables does that page rely on?”
The agent uses trace-mcp tools to trace the full request path from frontend Vue component to backend Nitro handler in a single step.
Without graph vs with trace-mcp
Measurements below reflect corpus-level benchmarks from our PR review context benchmark across 60 pull requests.
| Capability | Without graph | With trace-mcp |
|---|---|---|
| Median input tokens | ~13595 tokens | ~3291 tokens (-72.7%) |
| Auto-import resolution | Locate composable definitions | Auto-imports mapped to definitions |
| Data fetching paths | Match URL literals to server routes | Direct edge from literal string paths to /api/* |
| File-based routing | Manual path reconstruction | Complete URI route table extracted |
| Nuxt 4 app/ layout | Inspect files across split app/ and root directories | Detects Nuxt 4 compatibility layout |
| Tools exposed | None (reads full files) | 182 specialized MCP tools |
Frequently asked questions
How does trace-mcp handle Nuxt auto-imports without import statements?
trace-mcp indexes symbols in composables/, utils/, and server/utils/, automatically linking un-imported functions in Vue components and pages to their definitions.
Does trace-mcp connect useFetch calls to Nitro server API routes?
Yes. The Nuxt plugin extracts string literal URL paths from useFetch and useAsyncData calls, connecting frontend data fetching to matching server/api/ endpoint handlers in the graph.
Does trace-mcp support Nuxt 4 app/ directory structures?
Yes. trace-mcp recognizes Nuxt 4 compatibility mode, indexing pages, layouts, and components located under app/pages/ as well as classic root pages/.
Next steps
Explore the full Tools reference for available query tools, see the Language capability matrix for TypeScript and Vue parsing details, view Comparisons against other tools, or browse all Supported frameworks.
Catalogue: Articles / frameworks
Last updated: October 20, 2026