// 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+.
Use when building any UI element in the crowdfunding frontend — covers when to use existing uikit components, how to extend them, and when to ask before creating new ones
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
| name | nuxt |
| description | 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+. |
| license | MIT |
Vendored from onmax/nuxt-skills (MIT). See
.claude/skills/NOTICE.md.
Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.
The crowdfunding frontend uses:
nuxt-ui is installed$fetch/ofetch; Forms: Vuelidateserver/api/auth/@linuxfoundation/lfx-ui-core web component (client-only, registered as a plugin)See docs/rewrite/04-target-architecture.md for the full target stack.
Working with:
Read specific files based on current work:
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
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.
// 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}` }
})
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.
When to fetch latest docs:
Official sources:
Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.