nuxt

This skill acts as a navigational guide for Nuxt 4 development, focusing on the framework's modern architecture and server-side engine, Nitro. It prioritizes efficient context loading, instructing AI agents to access specific documentation files—such as server routes, routing conventions, or middleware plugins—only when necessary to maintain token economy. By adhering to Nuxt 4-specific patterns like typed routing and improved request handling, this resource helps developers avoid deprecated practices found in Nuxt 2 or 3. It serves as a structured interface between the codebase and official documentation, ensuring that configuration, data fetching, and app lifecycle management remain consistent with current ecosystem standards. This systematic approach reduces hallucination risks during complex refactors or new feature implementation by grounding the agent in the latest framework conventions.

When to Use This Skill

• •Building API endpoints within the Nitro server engine
• •Migrating legacy page components to Nuxt 4 typed routing
• •Defining global authentication middleware for protected routes
• •Configuring custom module layers or auto-import settings
• •Implementing server-side data fetching with useFetch

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

• “How do I setup a server API route in Nuxt 4?
• “Show me the correct way to handle route middleware
• “Explain Nuxt 4 file-based routing conventions
• “How to use typed routing instead of string-based paths?
• “Update my Nuxt configuration for auto-imports

Pro Tips

• 💡Always specify 'Nuxt 4+' when invoking the skill to ensure the most relevant and up-to-date guidance, especially regarding h3 v1 and nitropack v2.
• 💡Combine this skill with a 'typescript' skill for enhanced type safety and better autocompletion, particularly when dealing with typed routers and Zod validation.
• 💡For performance-critical components, ask the skill for best practices on `NuxtImg` and `NuxtTime` usage, preferring them over standard HTML elements where appropriate.

What this skill does

• •Context-aware guidance for Nuxt 4 server routes and API middleware
• •Typed routing and file-based layout structure management
• •Lifecycle management via specialized route guards and plugins
• •Configuration and module integration for Nuxt 4 build systems
• •Optimized implementation of built-in components like NuxtLink and NuxtImg

When not to use it

• ✕Projects strictly requiring Nuxt 2 or early Nuxt 3 compatibility
• ✕Pure client-side SPAs that do not benefit from Nitro server features
• ✕When another domain-specific skill like nuxthub or nuxt-ui handles the task

Example workflow

1. Analyze current codebase to determine if the task requires server or client guidance.
2. Load the relevant reference file (e.g., server.md or routing.md).
3. Consult the Nuxt 4 vs older versions table to identify deprecated syntax.
4. Refactor code to implement typed router patterns or H3 server utilities.
5. Verify integration against official Nuxt and Nitro documentation if edge cases arise.

Prerequisites

• –Basic knowledge of Vue 3 Composition API
• –Familiarity with TypeScript
• –Active Nuxt 4 project environment

Pitfalls & limitations

• !Over-requesting documentation files leads to high token consumption.
• !Applying deprecated Nuxt 3 logic to Nuxt 4 server events.
• !Failing to use built-in Nuxt components, resulting in unnecessary layout shifts.

FAQ

How it compares

Generic prompts often suggest outdated Nuxt 2/3 patterns; this skill forces strict adherence to Nuxt 4 typed router and Nitro engine conventions.

Source & trust

Recommended Rules

Recommended Workflows

Recommended MCP Servers