Nuxt 4+ Development
Vendored from onmax/nuxt-skills (MIT). See .claude/skills/NOTICE.md.
Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.
This project
The crowdfunding frontend uses:
- UI: PrimeVue v4 (theme: none) + Tailwind + CSS variables — do not assume
nuxt-ui is installed
- State: Pinia (app state) + Vue Query / TanStack (server state)
- HTTP:
$fetch/ofetch; Forms: Vuelidate
- Auth: OAuth2 PKCE + HTTP-only cookies via
server/api/auth/
- Header:
@linuxfoundation/lfx-ui-core web component (client-only, registered as a plugin)
See docs/rewrite/04-target-architecture.md for the full target stack.
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: PrimeVue v4 — use PrimeVue docs directly; do not assume nuxt-ui is installed
For content-driven sites: use nuxt-content skill
For creating modules: use nuxt-modules skill
For project scaffolding/CI: use ts-library skill
Loading Files
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
Quick Start
// server/api/hello.get.ts
import { z } from 'zod'
export default defineEventHandler(async (event) => {
const { name } = await getValidatedQuery(event, z.object({
name: z.string().default('world'),
}).parse)
return { message: `Hello ${name}` }
})
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.
1---2name: nuxt3description: 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: MIT5---67# Nuxt 4+ Development89> **Vendored from [onmax/nuxt-skills](https://github.com/onmax/nuxt-skills) (MIT).** See `.claude/skills/NOTICE.md`.1011Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.1213## This project1415The crowdfunding frontend uses:1617- **UI:** PrimeVue v4 (theme: none) + Tailwind + CSS variables — do **not** assume `nuxt-ui` is installed18- **State:** Pinia (app state) + Vue Query / TanStack (server state)19- **HTTP:** `$fetch`/ofetch; **Forms:** Vuelidate20- **Auth:** OAuth2 PKCE + HTTP-only cookies via `server/api/auth/`21- **Header:** `@linuxfoundation/lfx-ui-core` web component (client-only, registered as a plugin)2223See `docs/rewrite/04-target-architecture.md` for the full target stack.2425## When to Use2627Working with:2829- Server routes (API endpoints, server middleware, server utils)30- File-based routing (pages, layouts, route groups)31- Nuxt middleware (route guards, navigation)32- Nuxt plugins (app extensions)33- Nuxt-specific features (auto-imports, layers, modules)3435## Available Guidance3637Read specific files based on current work:3839- **[references/server.md](references/server.md)** - API routes, server middleware, validation (Zod), WebSocket, SSE40- **[references/routing.md](references/routing.md)** - File-based routing, route groups, typed router, definePage41- **[references/middleware-plugins.md](references/middleware-plugins.md)** - Route middleware, plugins, app lifecycle42- **[references/nuxt-composables.md](references/nuxt-composables.md)** - Nuxt composables (useRequestURL, useFetch, navigation)43- **[references/nuxt-components.md](references/nuxt-components.md)** - NuxtLink, NuxtImg, NuxtTime (prefer over HTML elements)44- **[references/nuxt-config.md](references/nuxt-config.md)** - Configuration, modules, auto-imports, layers4546**For Vue composables:** See `vue` skill composables.md (VueUse, Composition API patterns)47**For UI components:** PrimeVue v4 — use PrimeVue docs directly; do not assume `nuxt-ui` is installed48**For content-driven sites:** use `nuxt-content` skill49**For creating modules:** use `nuxt-modules` skill50**For project scaffolding/CI:** use `ts-library` skill5152## Loading Files5354**Consider loading these reference files based on your task:**5556- [ ] [references/server.md](references/server.md) - if creating API endpoints or server middleware57- [ ] [references/routing.md](references/routing.md) - if setting up pages, layouts, or route groups58- [ ] [references/nuxt-composables.md](references/nuxt-composables.md) - if using Nuxt composables (useFetch, useRequestURL, etc.)59- [ ] [references/middleware-plugins.md](references/middleware-plugins.md) - if working with middleware or plugins60- [ ] [references/nuxt-components.md](references/nuxt-components.md) - if using Nuxt components (NuxtLink, NuxtImg, etc.)61- [ ] [references/nuxt-config.md](references/nuxt-config.md) - if editing nuxt.config.ts62- [ ] [references/project-setup.md](references/project-setup.md) - if setting up CI/ESLint/build tools6364**DO NOT load all files at once.** Load only what's relevant to your current task.6566## Quick Start6768```ts69// server/api/hello.get.ts70import { z } from 'zod'7172export default defineEventHandler(async (event) => {73 const { name } = await getValidatedQuery(event, z.object({74 name: z.string().default('world'),75 }).parse)76 return { message: `Hello ${name}` }77})78```7980## Nuxt 4 vs Older Versions8182**You are working with Nuxt 4+.** Key differences:8384| Old (Nuxt 2/3) | New (Nuxt 4) |85| ----------------- | ------------------------------- |86| `<Nuxt />` | `<NuxtPage />` |87| `context.params` | `getRouterParam(event, 'name')` |88| `window.origin` | `useRequestURL().origin` |89| String routes | Typed router with route names |90| Separate layouts/ | Parent routes with `<slot>` |9192**If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.**9394## Latest Documentation9596**When to fetch latest docs:**9798- New Nuxt 4 features not covered here99- Module-specific configuration100- Breaking changes or deprecations101- Advanced use cases102103**Official sources:**104105- Nuxt: https://nuxt.com/docs106- h3 (server engine): https://v1.h3.dev/107- Nitro: https://nitro.build/108109## Token Efficiency110111Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.
linuxfoundation