Nuxt 4+ Development
Progressive guidance for Nuxt 4+ projects with latest patterns and conventions.
When to Use
Working with:
- Server routes (API endpoints, server middleware, server utils)
- File-based routing (pages, layouts, route groups)
- Nuxt middleware (route guards, navigation)
- Nuxt plugins (app extensions)
- Nuxt-specific features (auto-imports, layers, modules)
Available Guidance
Read specific files based on current work:
- references/server.md - API routes, server middleware, validation (Zod), WebSocket, SSE
- references/routing.md - File-based routing, route groups, typed router, definePage
- references/middleware-plugins.md - Route middleware, plugins, app lifecycle
- references/nuxt-composables.md - Nuxt composables (useRequestURL, useFetch, navigation)
- references/nuxt-components.md - NuxtLink, NuxtImg, NuxtTime (prefer over HTML elements)
- references/nuxt-config.md - Configuration, modules, auto-imports, layers
For Vue composables: See vue skill composables.md (VueUse, Composition API patterns)
For UI components: use nuxt-ui skill
For database/storage: use nuxthub skill
For content-driven sites: use nuxt-content skill
For creating modules: use nuxt-modules skill
For project scaffolding/CI: use personal-ts-setup skill
Usage Pattern
Progressive loading - only read what you need:
- Creating API endpoint? → references/server.md
- Setting up pages/routing? → references/routing.md
- Using composables/data fetching? → references/nuxt-composables.md
- Adding middleware/plugins? → references/middleware-plugins.md
- Configuring Nuxt? → references/nuxt-config.md
- Setting up CI/ESLint? → references/project-setup.md
DO NOT read all files at once. Load based on context:
- Working in
server/ → read server.md
- Working in
pages/ or layouts/ → read routing.md
- Using
useFetch, useRequestURL, navigation → read nuxt-composables.md
- Using
<a>, <img>, <time> elements → read nuxt-components.md
- Working in
middleware/ or plugins/ → read middleware-plugins.md
- Editing
nuxt.config.ts → read nuxt-config.md
Nuxt 4 vs Older Versions
You are working with Nuxt 4+. Key differences:
| Old (Nuxt 2/3) |
New (Nuxt 4) |
<Nuxt /> |
<NuxtPage /> |
context.params |
getRouterParam(event, 'name') |
window.origin |
useRequestURL().origin |
| String routes |
Typed router with route names |
| Separate layouts/ |
Parent routes with <slot> |
If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.
Latest Documentation
When to fetch latest docs:
- New Nuxt 4 features not covered here
- Module-specific configuration
- Breaking changes or deprecations
- Advanced use cases
Official sources:
Token Efficiency
Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: nuxt-23description: 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.4---56# Nuxt 4+ Development78Progressive guidance for Nuxt 4+ projects with latest patterns and conventions.910## When to Use1112Working with:1314- Server routes (API endpoints, server middleware, server utils)15- File-based routing (pages, layouts, route groups)16- Nuxt middleware (route guards, navigation)17- Nuxt plugins (app extensions)18- Nuxt-specific features (auto-imports, layers, modules)1920## Available Guidance2122Read specific files based on current work:2324- **[references/server.md](references/server.md)** - API routes, server middleware, validation (Zod), WebSocket, SSE25- **[references/routing.md](references/routing.md)** - File-based routing, route groups, typed router, definePage26- **[references/middleware-plugins.md](references/middleware-plugins.md)** - Route middleware, plugins, app lifecycle27- **[references/nuxt-composables.md](references/nuxt-composables.md)** - Nuxt composables (useRequestURL, useFetch, navigation)28- **[references/nuxt-components.md](references/nuxt-components.md)** - NuxtLink, NuxtImg, NuxtTime (prefer over HTML elements)29- **[references/nuxt-config.md](references/nuxt-config.md)** - Configuration, modules, auto-imports, layers3031**For Vue composables:** See `vue` skill composables.md (VueUse, Composition API patterns)32**For UI components:** use `nuxt-ui` skill33**For database/storage:** use `nuxthub` skill34**For content-driven sites:** use `nuxt-content` skill35**For creating modules:** use `nuxt-modules` skill36**For project scaffolding/CI:** use `personal-ts-setup` skill3738## Usage Pattern3940**Progressive loading - only read what you need:**4142- Creating API endpoint? → [references/server.md](references/server.md)43- Setting up pages/routing? → [references/routing.md](references/routing.md)44- Using composables/data fetching? → [references/nuxt-composables.md](references/nuxt-composables.md)45- Adding middleware/plugins? → [references/middleware-plugins.md](references/middleware-plugins.md)46- Configuring Nuxt? → [references/nuxt-config.md](references/nuxt-config.md)47- Setting up CI/ESLint? → [references/project-setup.md](references/project-setup.md)4849**DO NOT read all files at once.** Load based on context:5051- Working in `server/` → read server.md52- Working in `pages/` or `layouts/` → read routing.md53- Using `useFetch`, `useRequestURL`, navigation → read nuxt-composables.md54- Using `<a>`, `<img>`, `<time>` elements → read nuxt-components.md55- Working in `middleware/` or `plugins/` → read middleware-plugins.md56- Editing `nuxt.config.ts` → read nuxt-config.md5758## Nuxt 4 vs Older Versions5960**You are working with Nuxt 4+.** Key differences:6162| Old (Nuxt 2/3) | New (Nuxt 4) |63| ----------------- | ------------------------------- |64| `<Nuxt />` | `<NuxtPage />` |65| `context.params` | `getRouterParam(event, 'name')` |66| `window.origin` | `useRequestURL().origin` |67| String routes | Typed router with route names |68| Separate layouts/ | Parent routes with `<slot>` |6970**If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.**7172## Latest Documentation7374**When to fetch latest docs:**7576- New Nuxt 4 features not covered here77- Module-specific configuration78- Breaking changes or deprecations79- Advanced use cases8081**Official sources:**8283- Nuxt: https://nuxt.com/docs84- h3 (server engine): https://v1.h3.dev/85- Nitro: https://nitro.build/8687## Token Efficiency8889Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.9091---92> Converted and distributed by [TomeVault](https://tomevault.io/claim/hdkiller) — claim your Tome and manage your conversions.93<!-- tomevault:4.0:skill_md:2026-04-11 -->