Claude Code × Nuxt.js | How to Use DevTools Integration and Skills

Why Claude Code Works So Well with Nuxt Development

Nuxt.js is a flexible framework that lets you switch between SSR, SSG, and SPA with a single configuration file (nuxt.config.ts). On the flip side, Nuxt has its own auto-imports, composable conventions, and file-based routing rules that can easily lead to incorrect code generation if you aren't familiar with them.

Since 2025, Claude Code has built out a mechanism for incorporating external knowledge through skills and MCP (Model Context Protocol). This makes it possible to equip Claude Code with Nuxt-specific best practices.

Nuxt 4, released in 2024, introduced a major change — migrating to the app/ directory structure — meaning code generated with a Nuxt 3 configuration often won't work in a v4 project. This has fueled a particularly strong demand for "giving Claude Code knowledge of Nuxt 4."

nuxt-claude-devtools: Calling Claude Code from the DevTools Panel

@oro.ad/nuxt-claude-devtools (Nuxt Modules), listed in the official Nuxt.js module directory, is an integration module that lets you talk to Claude Code directly from within the Nuxt DevTools panel.

Key Features

• Streaming responses: Generated code and explanations stream in real time. You can review long answers without waiting.
• Voice input: Speak into your microphone to give instructions without typing.
• File attachments: Attach error logs, config files, type definitions, and more for a single consolidated consultation.
• Session management: Conversation history is retained so you can continue working with the previous context intact.
• Automatic Vue component context submission: The code of the component currently displayed in DevTools is automatically attached as context to Claude Code.

That last feature — automatic context submission — is particularly powerful. Without any copy-pasting, you can simply say "Rewrite this component in the Composition API," and Claude Code will generate a response with full awareness of the target file's entire code.

Installation Steps

1. Install the dependency via npm.

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

2. Add it to the modules array in nuxt.config.ts.

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

3. Start the local server with npm run dev, then click the Nuxt icon at the bottom of the browser to open DevTools.
4. A "Claude" tab will appear in the DevTools panel — log in with your Claude.ai account to start using it.

It only works in the development environment (devtools: { enabled: true }), so it won't be included in production builds. That's also a plus from a security standpoint.

Enhancing Claude Code's Nuxt 4 Knowledge with a Skill

The "Nuxt 4 Core" skill available on MCP Market (mcpmarket.com) is an extension that gives Claude Code Nuxt 4 best practices.

What Claude Code Learns with This Skill

By teaching Claude Code the major changes in Nuxt 4, the quality of generated code improves significantly.

• Migration to the app/ directory: In Nuxt 4, directories like pages/ and components/ moved under app/. This prevents code from being generated with the old structure.
• v4 file-based routing rules: Claude accurately understands that files under app/pages/ become routes.
• Choosing between SSR / SSG / SPA settings: Claude can appropriately suggest settings like ssr: false or target: 'static'.
• Recommended usage of useAsyncData vs useFetch: Applies Nuxt v4's recommended patterns for async data fetching in an SSR context.
• Nitro routing and API handlers: Claude accurately understands the rules for creating handlers under the server/api/ directory.

How to Apply It

If your Claude Code project root doesn't have a .claude/ directory, create one and place the skill configuration there. Alternatively, register it as a global skill under ~/.claude/skills/ to share it across all your Nuxt projects.

Once the skill is applied, simply saying "Create an authentication page with Nuxt 4's structure" will generate the correct v4 directory layout and API handlers — you'll see code returned in an app/-based structure rather than the old Nuxt 3 paths.

Do You Need Nuxt MCP? How to Choose

Nuxt.js officially provides an MCP server that Claude Code can access. However, developer Alex Op argues that "You Don't Need Nuxt MCP When Using Claude Code."

The main reason is context bloat. Connecting Nuxt MCP loads the entire Nuxt documentation into Claude Code's context window. The larger the context, the slower the responses and the higher the processing costs.

Alex recommends using custom configurations that reference the Nuxt documentation site directly instead. The idea is that loading only specific pages when needed is lighter and more efficient than keeping MCP connected at all times.

That said, Nuxt MCP has its own advantages. If you want to reduce the setup cost of getting everyone on a team to the same knowledge base, or if you need real-time access to the latest official Nuxt information, choosing MCP is a valid option.

Choosing Based on Your Goal

In Practice: Common Instruction Patterns for Claude Code × Nuxt

Here are some effective ways to phrase instructions in real development.

Rewriting a component

Using nuxt-claude-devtools with the target component open in DevTools, tell Claude: "Rewrite this from Options API to Composition API's <script setup> format. Keep the TypeScript type inference intact." It will return an appropriate conversion based on the current code.

SEO optimization for page components

When auto-generating Meta tag settings using useHead() or useSeoMeta(), specifying concretely — "Write the useSeoMeta() configuration I should use on this page, with examples for the page title and description" — improves accuracy.

Adding an API route

The instruction "Create server/api/users/[id].get.ts. Accept a user ID as a path parameter, fetch it from the database, and return it" generates correct code in Nitro's handler format. If the Nuxt 4 skill is applied, the defineEventHandler syntax will also follow the latest recommended style.

Debugging errors

Copy and paste a stack trace from your terminal, then prefix your message with "Tell me the cause of this error and how to fix it. This is a Nuxt 4 project." This yields specific solutions for Nuxt-specific errors.

Optimizing nuxt.config.ts

Asking "Look at the project's current nuxt.config.ts and suggest performance improvements" will get you advice on module load order and cleaning up unnecessary configuration entries.

Caveats When Using Nuxt × Claude Code

Here are some common pitfalls to watch for in practice.

• Make a habit of specifying the version: Nuxt 3 and Nuxt 4 have significantly different APIs. Simply adding "This is a Nuxt 4 project" at the start of your instruction reduces version-related mistakes in generated code.
• Be explicit about auto-imports: Thanks to Nuxt's auto-imports, Vue functions like ref and computed can be used without import statements. Telling Claude "No imports needed — Nuxt handles them automatically" prevents unnecessary import statements from appearing.
• Specify the difference between $fetch and useFetch: The right function depends on whether you're in an SSR environment or client-side only. Stating the context explicitly — e.g., "Use useAsyncData since this runs on the server side" — improves accuracy.
• Always verify behavior in a production build separately: Code generated by Claude Code may work in the development environment but produce type errors or SSR behavior differences after nuxt build. Always do a final check with nuxt build && nuxt preview.
• Watch for skill updates in GitHub PR #33498: An improvement PR for Claude Code skills is in progress in the official Nuxt repository (#33498). Tracking the latest version keeps Claude Code's Nuxt knowledge up to date.

Summary

There are three main ways to integrate Claude Code with Nuxt.js.

1. Use nuxt-claude-devtools to interact with Claude Code interactively from the DevTools panel.
2. Apply the Nuxt 4 Core skill to update Claude Code's knowledge base to the latest specifications.
3. Use Nuxt MCP to ensure real-time access to the latest documentation.

If you want to try something today in a personal project, installing nuxt-claude-devtools has the lowest barrier and the fastest payoff. If you're working on a Nuxt 4 migration, applying the Nuxt 4 Core skill is essentially a must. And if you want to unify Claude Code usage across an entire team, combining MCP with skills gives you a powerful development environment.

The integration ecosystem between Nuxt.js and Claude Code has started to mature rapidly entering 2026, and more modules and integrations are expected to emerge going forward.