onmax

nuxt

440
15
# Install this skill:
npx skills add onmax/nuxt-skills --skill "nuxt"

Install specific skill from multi-skill repository

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

# SKILL.md


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.
license: MIT


Nuxt 4+ Development

Progressive guidance for Nuxt 4+ projects 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:

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 personal-ts-setup skill

Usage Pattern

Progressive loading - only read what you need:

DO NOT read all files at once. Load based on context:

  • Working in server/ β†’ read server.md
  • Working in pages/ or layouts/ β†’ read routing.md
  • Using useFetch, useRequestURL, navigation β†’ read nuxt-composables.md
  • Using <a>, <img>, <time> elements β†’ read nuxt-components.md
  • Working in middleware/ or plugins/ β†’ read middleware-plugins.md
  • Editing nuxt.config.ts β†’ read nuxt-config.md

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:

  • Nuxt: https://nuxt.com/docs
  • h3 (server engine): https://v1.h3.dev/
  • Nitro: https://nitro.build/

Token Efficiency

Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.