nuxt_skill

Overview

This skill provides concise, practical guidance for developing Nuxt 4+ applications. It focuses on file-based routing, server routes and middleware, Nuxt-specific composables and components, and up-to-date patterns for h3 v1 and Nitro v2. Use it to get targeted help for API endpoints, routing, plugins, and configuration without loading irrelevant material.

How this skill works

Load only the reference most relevant to your current task: server routes, routing, middleware/plugins, composables, components, or nuxt.config. Each reference contains focused examples and patterns (API endpoints, validation with Zod, WebSocket/SSE, typed routing, definePage, auto-imports, and Nitro patterns). The skill highlights Nuxt 4 differences vs older versions and points to official docs when you need the latest breaking changes or module specifics.

When to use it

• Building API endpoints, server middleware, or using h3 helpers (validation, WebSocket, SSE)
• Setting up file-based pages, route groups, or typed router navigation
• Implementing route middleware, plugins, or lifecycle hooks
• Using Nuxt composables like useFetch, useRequestURL, or navigation helpers
• Configuring nuxt.config.ts, modules, auto-imports, or layer patterns

Best practices

• Read only the specific reference file that matches your current work area to stay focused and token-efficient
• Prefer Nuxt components (NuxtLink, NuxtImg, NuxtTime) over raw HTML elements for performance and integration
• Use typed routes and definePage for safer navigation and better DX in Nuxt 4
• Use h3 v1 helpers for server validation, WebSocket and SSE patterns, and follow Nitro v2 conventions for server utilities
• Consult official docs (nuxt.com, v1.h3.dev, nitro.build) for new features, breaking changes, or module-specific details

Example use cases

• Create a validated API route using h3 helpers and Zod for input validation
• Set up nested pages and route groups with typed router names and definePage
• Add route middleware to protect pages and create client/server plugins for shared logic
• Implement a server-sent events endpoint or WebSocket handler using h3 v1 patterns
• Adjust nuxt.config.ts for auto-imports, layers, or to enable a Nitro runtime feature