Nuxt 4+ Development

nuxt

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+.

onmax/nuxt-skills·8.1Kinstalls717starsFrontend Development

SKILL.md

Full skill instructions

Nuxt 4+ Development

Progressive guidance for Nuxt 4+ projects (v4.3+) 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 ts-library skill

Loading Files

Consider loading these reference files based on your task:

references/server.md - if creating API endpoints or server middleware
references/routing.md - if setting up pages, layouts, or route groups
references/nuxt-composables.md - if using Nuxt composables (useFetch, useRequestURL, etc.)
references/middleware-plugins.md - if working with middleware or plugins
references/nuxt-components.md - if using Nuxt components (NuxtLink, NuxtImg, etc.)
references/nuxt-config.md - if editing nuxt.config.ts
references/project-setup.md - if setting up CI/ESLint/build tools

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.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/onmax/nuxt-skills --skill nuxt

View on GitHub

nuxt

More Frontend Development skills

View all

Frontend Development

ui-ux-pro-max

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks.

133.1K 383.9K

View

Frontend Development

vercel-composition-patterns

Vercel's official collection of agent skills

31.9K 374.1K

View

Frontend Development

imagegen-frontend-web

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K

View

Frontend Development

imagegen-frontend-mobile

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K

View

Frontend Development

shadcn

Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI.

125.1K 271.7K

View

Frontend Development

vercel-react-native-skills

React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules.

31.9K 231.8K

View

Frontend Development

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

31.9K 143K

View

Frontend Development

vercel-react-view-transitions

Native browser animations for React UI state changes using the View Transition API.

31.9K 143K

View

Frontend Development

convex-create-component

Design and build isolated, reusable Convex backend components with clear boundaries and app-facing wrappers.

63 123.5K

View

Frontend Development

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

179.7K 106.4K

View