Agent skill

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

View SKILL.md on GitHub Repository
Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/onmax/nuxt

SKILL.md

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.

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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results