How do I install the Nuxt skill?

Run npx skillmds@latest add antfu/nuxt in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Nuxt skill do?

Build full-stack Vue applications with Nuxt 4, covering SSR, file-based routing, auto-imports, server routes, and deployment. It is listed under Web & Frontend, Coding & Dev Tools, Frontend Frameworks on SkillMD.

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nuxt?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Anthony Fu (@antfu) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nuxt by antfu — Agent Skill

Name: Nuxt
Rating: 4.2 (5 reviews)
Author: Anthony Fu

File contents

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 4.x, generated at 2026-06-22.

Nuxt 4 note: 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 now point at app/; use ~~/@@ for the root.

Core

Topic	Description	Reference
Directory Structure	Nuxt 4 `app/` srcDir, `shared/`, aliases, conventions	core-directory-structure
Configuration	nuxt.config.ts, app.config.ts, aliases, compatibilityVersion, experimental	core-config
CLI Commands	Dev server, build, generate, preview, and utility commands	core-cli
Routing	File-based routing, dynamic routes, named views, layout props, middleware	core-routing
Data Fetching	useFetch, useAsyncData, $fetch, 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, server middleware, Nitro server engine	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

---name: nuxtdescription: Build full-stack Vue applications with Nuxt 4, covering SSR, file-based routing, auto-imports, server routes, and deployment.---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 4.x, generated at 2026-06-22.> **Nuxt 4 note:** 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 now point at `app/`; use `~~`/`@@` for the root.## Core| Topic | Description | Reference ||-------|-------------|-----------|| Directory Structure | Nuxt 4 `app/` srcDir, `shared/`, aliases, conventions | [core-directory-structure](references/core-directory-structure.md) || Configuration | nuxt.config.ts, app.config.ts, aliases, compatibilityVersion, experimental | [core-config](references/core-config.md) || CLI Commands | Dev server, build, generate, preview, and utility commands | [core-cli](references/core-cli.md) || Routing | File-based routing, dynamic routes, named views, layout props, middleware | [core-routing](references/core-routing.md) || Data Fetching | useFetch, useAsyncData, $fetch, createUseFetch factories, caching | [core-data-fetching](references/core-data-fetching.md) || Modules | Creating and using Nuxt modules, Nuxt Kit utilities | [core-modules](references/core-modules.md) || Deployment | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare | [core-deployment](references/core-deployment.md) |## Features| Topic | Description | Reference ||-------|-------------|-----------|| Composables Auto-imports | Vue/Nuxt composables, custom composables, `shared/`, useAnnouncer | [features-composables](references/features-composables.md) || Components Auto-imports | Component naming, lazy loading, hydration strategies | [features-components-autoimport](references/features-components-autoimport.md) || Built-in Components | NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, and more | [features-components](references/features-components.md) || State Management | useState composable, SSR-friendly state, Pinia integration | [features-state](references/features-state.md) || Server Routes | API routes, server middleware, Nitro server engine | [features-server](references/features-server.md) |## Rendering| Topic | Description | Reference ||-------|-------------|-----------|| Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | [rendering-modes](references/rendering-modes.md) |## Best Practices| Topic | Description | Reference ||-------|-------------|-----------|| Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling | [best-practices-data-fetching](references/best-practices-data-fetching.md) || SSR & Hydration | Avoiding context leaks, hydration mismatches, composable patterns | [best-practices-ssr](references/best-practices-ssr.md) |## Advanced| Topic | Description | Reference ||-------|-------------|-----------|| Layers | Extending applications with reusable layers | [advanced-layers](references/advanced-layers.md) || Lifecycle Hooks | Build-time, runtime, and server hooks | [advanced-hooks](references/advanced-hooks.md) || Module Authoring | Publishable modules with Nuxt Kit, keyed composables, dependencies | [advanced-module-authoring](references/advanced-module-authoring.md) |

Frequently asked questions

Nuxt