1---
2name: nuxt
3description: Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.
4license: MIT
5---
6 
7# Nuxt 4+ Development
8 
9Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.
10 
11## When to Use
12 
13Working with:
14 
15- Server routes (API endpoints, server middleware, server utils)
16- File-based routing (pages, layouts, route groups)
17- Nuxt middleware (route guards, navigation)
18- Nuxt plugins (app extensions)
19- Nuxt-specific features (auto-imports, layers, modules)
20 
21## Available Guidance
22 
23Read specific files based on current work:
24 
25- **[references/server.md](references/server.md)** - API routes, server middleware, validation (Zod), WebSocket, SSE
26- **[references/routing.md](references/routing.md)** - File-based routing, route groups, typed router, definePage
27- **[references/middleware-plugins.md](references/middleware-plugins.md)** - Route middleware, plugins, app lifecycle
28- **[references/nuxt-composables.md](references/nuxt-composables.md)** - Nuxt composables (useRequestURL, useFetch, navigation)
29- **[references/nuxt-components.md](references/nuxt-components.md)** - NuxtLink, NuxtImg, NuxtTime (prefer over HTML elements)
30- **[references/nuxt-config.md](references/nuxt-config.md)** - Configuration, modules, auto-imports, layers
31 
32**For Vue composables:** See `vue` skill composables.md (VueUse, Composition API patterns)
33**For UI components:** use `nuxt-ui` skill
34**For database/storage:** use `nuxthub` skill
35**For content-driven sites:** use `nuxt-content` skill
36**For creating modules:** use `nuxt-modules` skill
37**For project scaffolding/CI:** use `ts-library` skill
38 
39## Loading Files
40 
41**Consider loading these reference files based on your task:**
42 
43- [ ] [references/server.md](references/server.md) - if creating API endpoints or server middleware
44- [ ] [references/routing.md](references/routing.md) - if setting up pages, layouts, or route groups
45- [ ] [references/nuxt-composables.md](references/nuxt-composables.md) - if using Nuxt composables (useFetch, useRequestURL, etc.)
46- [ ] [references/middleware-plugins.md](references/middleware-plugins.md) - if working with middleware or plugins
47- [ ] [references/nuxt-components.md](references/nuxt-components.md) - if using Nuxt components (NuxtLink, NuxtImg, etc.)
48- [ ] [references/nuxt-config.md](references/nuxt-config.md) - if editing nuxt.config.ts
49- [ ] [references/project-setup.md](references/project-setup.md) - if setting up CI/ESLint/build tools
50 
51**DO NOT load all files at once.** Load only what's relevant to your current task.
52 
53## Quick Start
54 
55```ts
56// server/api/hello.get.ts
57import { z } from 'zod'
58 
59export default defineEventHandler(async (event) => {
60  const { name } = await getValidatedQuery(event, z.object({
61    name: z.string().default('world'),
62  }).parse)
63  return { message: `Hello ${name}` }
64})
65```
66 
67## Nuxt 4 vs Older Versions
68 
69**You are working with Nuxt 4+.** Key differences:
70 
71| Old (Nuxt 2/3)    | New (Nuxt 4)                    |
72| ----------------- | ------------------------------- |
73| `<Nuxt />`        | `<NuxtPage />`                  |
74| `context.params`  | `getRouterParam(event, 'name')` |
75| `window.origin`   | `useRequestURL().origin`        |
76| String routes     | Typed router with route names   |
77| Separate layouts/ | Parent routes with `<slot>`     |
78 
79**If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.**
80 
81## Latest Documentation
82 
83**When to fetch latest docs:**
84 
85- New Nuxt 4 features not covered here
86- Module-specific configuration
87- Breaking changes or deprecations
88- Advanced use cases
89 
90**Official sources:**
91 
92- Nuxt: https://nuxt.com/docs
93- h3 (server engine): https://v1.h3.dev/
94- Nitro: https://nitro.build/
95 
96## Token Efficiency
97 
98Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.
99