Nuxt — Agent Skill by Anthony Fu

From the author

Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Nuxt is a full-stack Vue framework designed for universal deployment. This skill provides essential guidance on Nuxt 5, covering its directory structure, file-based routing, server-side rendering, and Nitro-based server engine. It includes best practices for data fetching, state management, and modular architecture, helping developers leverage features like auto-imports and hybrid rendering.

What it does

Explains the Nuxt 5 directory structure and configuration conventions.
Details file-based routing, including typed and case-sensitive routes.
Provides guidance on data fetching using useFetch and $fetch.
Covers server-side rendering, hybrid rendering, and Nitro server integration.
Explains how to extend applications using Nuxt Layers and modules.
Outlines lifecycle hooks for build-time and runtime customization.

When to use it

When starting a new full-stack project with Vue and Nuxt.
When migrating existing projects to Nuxt 5 and Nitro v3.
When implementing server-side rendering or hybrid rendering strategies.
When creating reusable application layers or custom Nuxt modules.
When optimizing data fetching patterns and state management in SSR environments.

Advantages

Provides standardized patterns for Nuxt 5 development.
Simplifies complex concepts like Nitro server integration and lifecycle hooks.
Offers clear guidance on project structure and file-based routing.
Supports efficient code reuse through the Nuxt Layers system.

Usage examples

“How do I structure my Nuxt 5 project directory?”: The agent explains the default app/ directory structure for Vue code and the root-level placement for server/, public/, and nuxt.config.ts files.
“Explain how to use layers to share components between projects.”: The agent provides instructions on using the extends property in nuxt.config.ts to import layers from local directories, git repositories, or npm packages.
“How do I hook into the page navigation lifecycle?”: The agent shows how to use nuxtApp.hook('page:finish', ...) within a plugin to execute code after navigation completes.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/antfu/nuxt/download
Unzip it into the cross-client skills folder of your project:
```
mkdir -p .agents/skills && unzip nuxt.zip -d .agents/skills
```

Documentation by Anthony Fu

Nuxt is a full-stack Vue framework that provides server-side rendering, file-based routing, auto-imports, and a powerful module system. It uses Nitro as its server engine for universal deployment across Node.js, serverless, and edge platforms.

The skill is based on Nuxt 5.x (5.0.0-0), generated at 2026-11-05.

Directory layout: the default srcDir is app/ — Vue app code (app.vue, components/, composables/, pages/, etc.) lives under app/, while server/, shared/, public/, modules/, layers/ and nuxt.config.ts stay at the project root. The ~/@ aliases point at app/; use ~~/@@ for the root.

Nuxt 5 note: Nuxt 5 makes many former experimental flags the default. The biggest shifts for agents: server code moves to Nitro v3 (h3 v2, Web-standard Request/Response), server utilities import from nuxt/server and are no longer auto-imported by default, $fetch/useFetch are typed from generated route types, routing is case-sensitive and typed by default, and the bundler is Vite 8 (Rolldown). Nuxt 5 requires Node 22.19/24.11+. A Nitro v2 compatibility layer (nitroLegacy) keeps older server code building during migration. See individual references for details.

Core

Topic	Description	Reference
Directory Structure	Nuxt 4 `app/` srcDir, `shared/`, aliases, conventions	core-directory-structure
Configuration	nuxt.config.ts, app.config.ts, aliases, Nuxt 5 defaults, jiti removal, experimental	core-config
CLI Commands	Dev server, build, generate, preview, and utility commands	core-cli
Routing	File-based routing, case-sensitive + typed routes, named views, layout props, middleware	core-routing
Data Fetching	useFetch, useAsyncData, $fetch, typed routes, createUseFetch factories, caching	core-data-fetching
Modules	Creating and using Nuxt modules, Nuxt Kit utilities	core-modules
Deployment	Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare	core-deployment

Features

Topic	Description	Reference
Composables Auto-imports	Vue/Nuxt composables, custom composables, `shared/`, useAnnouncer	features-composables
Components Auto-imports	Component naming, lazy loading, hydration strategies	features-components-autoimport
Built-in Components	NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, and more	features-components
State Management	useState composable, SSR-friendly state, Pinia integration	features-state
Server Routes	API routes, `nuxt/server` imports, Nitro v3 (h3 v2), sessions, middleware	features-server

Rendering

Topic	Description	Reference
Rendering Modes	Universal (SSR), client-side (SPA), hybrid rendering, route rules	rendering-modes

Best Practices

Topic	Description	Reference
Data Fetching Patterns	Efficient fetching, caching, parallel requests, error handling	best-practices-data-fetching
SSR & Hydration	Avoiding context leaks, hydration mismatches, composable patterns	best-practices-ssr

Advanced

Topic	Description	Reference
Layers	Extending applications with reusable layers	advanced-layers
Lifecycle Hooks	Build-time, runtime, and server hooks	advanced-hooks
Module Authoring	Publishable modules with Nuxt Kit, keyed composables, dependencies	advanced-module-authoring

Files

ATTRIBUTION.mdAdded by AutoGineer889 B
GENERATION.md134 B
LICENSELicence file added by AutoGineer1.1 KiB
SKILL.md4.5 KiB
references/advanced-hooks.md7.2 KiB
references/advanced-layers.md5.1 KiB
references/advanced-module-authoring.md16.5 KiB
references/best-practices-data-fetching.md9.2 KiB
references/best-practices-ssr.md7.5 KiB
references/core-cli.md4.8 KiB
references/core-config.md10.5 KiB
references/core-data-fetching.md11.4 KiB
references/core-deployment.md5.1 KiB
references/core-directory-structure.md9.8 KiB
references/core-modules.md5.4 KiB
references/core-routing.md6.8 KiB
references/features-components-autoimport.md5.9 KiB
references/features-components.md6.1 KiB
references/features-composables.md7.2 KiB
references/features-server.md11.1 KiB
references/features-state.md3.9 KiB
references/rendering-modes.md5.5 KiB

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Low risk

Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Implement
Matt Pocock· Community
A structured workflow for implementing software tasks from specifications or tickets.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository317.5k
Source Driven Development
Addy Osmani· Community
A rigorous process for grounding code implementation in official, version-specific documentation to ensure accuracy and avoid outdated patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Write Swift
Emil Kowalski· Community
A comprehensive guide to writing modern, safe, and performant Swift code following the language's latest idioms and concurrency models.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Cardputer Buddy
AnthropicOfficial
Iterate on the Cardputer-Adv MicroPython app bundle (Claude Buddy, Snake, Hello) after the device is already provisioned via m5-onboard. Use when the user wants to add a new app, push a single changed .py without re-flashing, watch device serial logs, or run a one-shot REPL command. Trigger on "add an app", "push to the cardputer", "tail the device", "run on the device", or follow-up work after /maker-setup.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository46.3k
Typescript Pro
Seth Hobson· Community
An expert TypeScript persona focused on advanced typing, enterprise architecture, and strict type safety.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Scala Pro
Seth Hobson· Community
An expert Scala engineer persona specializing in functional programming, distributed systems, and enterprise-grade architecture.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k