nuxt-claude-devtools

🥈Silver

Nuxt DevTools integration for Claude Code AI assistant. Enables developers to use Claude's AI capabilities within Nuxt DevTools for debugging, code generation, and real-time assistance. Connects to Nuxt.js projects and Claude Code AI, streamlining development workflows.

2000Updated 1mo ago

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/oro-ad/nuxt-claude-devtools.git

Works with:

Claude

Overview

About This Skill

Nuxt Claude DevTools integrates Claude Code AI into Nuxt's DevTools panel, enabling developers to access AI-powered assistance without switching applications. The module supports interactive chat with streaming responses, file and image attachments, voice input, and session management for continuous conversations. Developers can extend Claude's capabilities with markdown-based skills, custom slash commands, and subagents for specialized tasks. Context chips automatically include viewport size, browser info, and routing details, while a component picker lets you select Vue components directly from your app to add as context. An optional overlay mode provides a lightweight floating chat panel that works independently of DevTools, with support for collaborative sharing via tunnel and mobile-responsive interfaces.

How to Use

["Install the nuxt-claude-devtools package in your Nuxt.js project: `npm install @nuxt/devtools nuxt-claude-devtools` or `yarn add @nuxt/devtools nuxt-claude-devtools`.","Ensure Claude Code is installed and authenticated: `claude --version` to verify. If not, run `claude auth login`.","Run the integration with a specific task, e.g., `npx claude-devtools --project /path/to/project --task debug-api-endpoint`. Replace `--task` with your goal (e.g., `generate-component`, `optimize-performance`).","Review the AI-generated suggestions in the terminal or Nuxt DevTools UI. Test the proposed changes locally before applying them to your codebase.","For complex tasks, use the `--context` flag to provide additional context, e.g., `--context \"The project uses Pinia for state management.\"`."]

Use Cases

Debugging Nuxt applications with AI assistance without leaving DevTools

Generating Vue 3 components with context about your current routing and viewport

Creating custom skills and slash commands to extend Claude's project-specific knowledge

Code reviewing and architectural guidance through specialized subagents

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/oro-ad/nuxt-claude-devtools

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use the nuxt-claude-devtools integration to [TASK] in my Nuxt.js project. The project is located at [PROJECT_PATH]. If debugging is needed, analyze the error messages in the console or terminal output. If generating code, ensure it follows Nuxt.js best practices and is compatible with the project's current setup. Provide step-by-step instructions or code snippets as needed. [ADDITIONAL_CONTEXT]

Example Output

I’ve been working on a Nuxt.js e-commerce project (`/Users/dev/projects/nuxt-store`) and noticed that the product detail page isn’t loading correctly. The console shows a 404 error for the API endpoint `/api/products/[id]`. Using the nuxt-claude-devtools integration, I ran the following command in the terminal:

```bash
npx claude-devtools --project /Users/dev/projects/nuxt-store --task debug-api-endpoint
```

The tool identified that the dynamic route parameter `[id]` wasn’t being passed correctly to the API call in `pages/products/_id.vue`. It suggested updating the `useFetch` call to:

```javascript
const { data: product } = await useFetch(`/api/products/${route.params.id}`, { key: route.params.id });
```

After applying the fix, the product detail page loaded successfully, and the API response returned the expected data. The tool also flagged a potential performance issue with unoptimized images on the page and provided a suggested fix using Nuxt Image module.

**Key Insights:**
- The API endpoint was misconfigured due to incorrect route parameter handling.
- Performance optimization recommendations were generated automatically.
- The fix was implemented in under 5 minutes with no manual debugging required.

Would you like me to generate a PR description for this change or analyze another part of the project?