Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

Nuxt — Claude Code skill: SSR, routing, and type safety

This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add antfu/skills --skill nuxt -a claude-code
Open on GitHub

What nuxt does

The skill covers Nuxt's project structure — app code in app/, server routes in server/, config at root — and teaches your agent about typed routing, component and composable auto-imports, and Nitro v3, the universal deployment layer for Node.js, serverless, and edge platforms.

It spans configuration (nuxt.config.ts), data fetching (useFetch, useAsyncData, $fetch with typed routes), state management (useState), server routes with sessions and middleware, SSR patterns, and module authoring. The skill reflects Nuxt 5.x defaults: server code uses nuxt/server imports, routing is case-sensitive and typed, and the bundler is Vite 8.

Requires Node.js 22.19 or higher. For older Nuxt versions, a nitroLegacy compatibility layer eases server-code migration.

What it helps with

  • Set up file-based routing with typed route definitions
  • Build server APIs with Nitro v3, sessions, and middleware
  • Load data efficiently with useFetch and caching
  • Configure hybrid rendering and per-route rules
  • Organize app structure: srcDir, composables, components, path aliases

Example prompts for the agent

  • Create an API route at `server/api/users.ts` with validation and session support
  • Explain how to fetch data in Nuxt without double-loading on server and client
  • Set up hybrid rendering for specific pages

How to install nuxt

1Skills CLI (Vercel)

npx skills add antfu/skills --skill nuxt -a claude-code

2Manually: put the files in place

~/.claude/skills/nuxt/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nuxt/

From the same set7

The whole set →
vitest Anthony Fu This skill guides work with Vitest tests, mocks, coverage, filtering, and fixtures. Use it when setting up tests or checking how Vitest fits a Vite project. Claude Code CX Codex Cursor +1 43,600installs vite Anthony Fu This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. Use it with vite.config.ts work. Claude Code CX Codex Cursor +1 39,800installs vue Anthony Fu This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Use it when writing Vue SFCs or built-in component flows. Claude Code CX Codex Cursor +1 35,800installs pnpm Anthony Fu Skill for working with pnpm, a Node.js package manager with strict dependency resolution. Use it when your project relies on workspaces, version catalogs, patches, or dependency overrides. Claude Code CX Codex Cursor +1 22,300installs pinia Anthony Fu Pinia skill adds reference documentation to Claude Code for the official Vue state management library. Use it when defining stores, managing state, getters, and actions in Vue apps. Claude Code CX Codex Cursor +1 19,700installs unocss Anthony Fu A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it. Claude Code CX Codex Cursor +1 16,000installs

Similar

debug-optimize-lcp ChromeDevTools Breaks Largest Contentful Paint into four sequential stages and shows exactly where the main content load is bottlenecked. Claude Code CX Codex Cursor +1 3,500installs next-intl-add-language official github Adds a language to a Next.js app using next-intl by translating en.json and updating locale setup. Use it when a new locale must appear in the UI. GitHub Copilot 9,349installs design-mobile-apps designed-by-ai Designs mobile screens via the Sleek REST API and translates them into React Native or HTML code. Claude Code CX Codex Cursor +1 1,000,000installs mobile-ios-design Seth Hobson Guides native iOS interface work with Apple HIG and SwiftUI patterns. Use it when building views, navigation, or adaptive layouts. Claude Code CX Codex Cursor 23,659installs vscode-ext-commands official github This skill guides VS Code extension command work, covering naming, visibility, localization, icons, and related contribution details. GitHub Copilot 9,000installs fluentui-blazor official github This skill guides Blazor work with Microsoft Fluent UI components, service providers, forms, dialogs, and themes. Use it while building or debugging a Fluent UI app. GitHub Copilot 9,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about nuxt

How do I install the Nuxt skill in Claude Code?

Run npx skills add antfu/skills --skill nuxt -a claude-code. Your agent will then find the documentation at ~/.claude/skills/nuxt/SKILL.md.

What does the Nuxt skill do?

It teaches your agent Nuxt 5 project structure, file-based routing, Nitro v3 server routes, data fetching patterns, and hybrid rendering. Helps write correct code without compatibility gaps.

What Node.js version does Nuxt 5 require?

Nuxt 5 requires Node.js 22.19, 24.11, or higher.

Source text

SKILL.md · MIT 
---
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.9.25"
  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-09-25.

> **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) |

© Anthony Fu · MIT · antfu/skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor