Provide Nuxt 4+ guidance for server routes, routing, middleware, and composables.
npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-onmax
Please help me install this Agent Skill. Skill: nuxt Source: https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt Command: npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-onmax
Nuxt 4+ development can be complex with rapidly evolving patterns and conventions. This Skill provides up-to-date guidance, best practices, and common pitfalls to help developers build robust applications efficiently, reducing time spent on documentation lookup and debugging.
defineEventHandler and getRouterParam with code examples, ensuring you follow the latest Nuxt 4+ server patterns.I am working on a Nuxt 4+ project. I need to create a new API endpoint in the server/api/ directory. Provide me with the best practices and code examples for defining a GET endpoint with a dynamic parameter.
High-intent search queries and answers about installing and using this skill.
Server routes in Nuxt 4+ use the `server/api/` directory with `defineEventHandler` to define endpoints. Each file automatically becomes a route; use `getRouterParam` to access dynamic parameters and follow the latest Nuxt 4+ patterns for type-safe, SSR-compatible handlers.
File-based routing in Nuxt 4+ uses directory structure in `pages/` to automatically generate routes. Nuxt processes files and nested folders into a route tree; use dynamic segments with brackets (e.g., `[id].vue`) for parameters, leveraging auto-imports and latest conventions for cleaner code.
Middleware in Nuxt 4+ lives in the `middleware/` directory and runs before route rendering; plugins in `plugins/` initialize app-wide utilities. Define middleware with `defineRouteMiddleware`, use plugins with `defineNuxtPlugin`, and apply them via `middleware` metadata or auto-registration following current best practices.
Nuxt 4+ server routes support both WebSocket and SSE through Nitro handlers. Define WebSocket handlers with `websocket` event support and SSE with response streaming; both integrate with the Nitro backend configuration, enabling real-time communication patterns in Nuxt applications.
Nuxt-specific composables like `useRouter`, `useRoute`, `useState`, and `useFetch` provide framework-integrated utilities for navigation, state, and data fetching. Auto-imported by default, they ensure type-safe, SSR-compatible reactive behavior aligned with Nuxt 4+ patterns and conventions.
Configure Nuxt 4+ via `nuxt.config.ts` and Nitro via `nitro.config.ts` or nested `nitro` options. Set up server routes, middleware, plugins, auto-imports, and deployment targets; latest patterns include type-safe schemas and environment-specific configurations for production-ready applications.
briosoemilioBuild server-rendered Vue apps with Nuxt routing and data fetching.
mguinadaTrace, evaluate, and monitor LLM applications with OpenTelemetry instrumentation.
gallop-systemsTest Nuxt 3 and Nitro apps against a real PostgreSQL database with transactional rollback.
mgd34msuDevelop full-stack applications with SvelteKit routing, SSR, and data loading.