Skip to content
Development
Skill

/nuxt

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.

From plugin
nuxt-skills
72330 skills1 MCP

Claude Code

$ npx -y skills add onmax/nuxt-skills --skill nuxt --agent claude-code

SKILL.md

nuxt.SKILL.md
name: nuxt
description: 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.
metadata:
  author: Anthony Fu
  version: "2026.11.5"
  source: Generated from https://github.com/nuxt/nuxt, scripts located at https://github.com/antfu/skills

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](references/core-directory-structure.md) | | Configuration | nuxt.config.ts, app.config.ts, aliases, Nuxt 5 defaults, jiti removal, 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, case-sensitive + typed routes, named views, layout props, middleware | [core-routing](references/core-routing.md) | | Data Fetching | useFetch, useAsyncData, $fetch, typed routes, 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, `nuxt/server` imports, Nitro v3 (h3 v2), sessions, middleware | [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) |

Read more
@onmax
Ships withnuxt-skills

Vue, Nuxt, and NuxtHub skills for AI coding assistants.

72330 skills1 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
723
Star history of onmax/nuxt-skills on GitHub, a chart by star-history.com

Other skills on nuxt-skills.

arkenv

arkenv

Answer questions about ArkEnv and help implement environment variable validation. Use when developers: (1) Ask about environment…

@onmax@onmaxInstall Skill
comark

comark

Comark (Components in Markdown) parser: syntax, AST, Vue/React/Svelte/Angular renderers, plugins, and LLM streaming with…

@onmax@onmaxInstall Skill
eve

eve

Build durable backend AI agents with the eve framework. Use when creating, editing, or debugging an eve project — agent…

@onmax@onmaxInstall Skill
nanime

nanime

Build animations in a Nuxt app with nanime, the Nuxt module wrapping Anime.js v4. Use when animating elements, text, SVG or…

@onmax@onmaxInstall Skill
nitro

nitro

Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working…

@onmax@onmaxInstall Skill
nuxt-better-auth

nuxt-better-auth

Guides authentication in Nuxt apps using @nuxtjs/better-auth. Use when installing or configuring the module, using its client or…

@onmax@onmaxInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills13d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react4d252k
@facebook@facebookInstall Skill

Questions about nuxt.

Which coding agents can use nuxt?
nuxt installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.