---
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.6.22"
  source: Generated from https://github.com/nuxt/nuxt, scripts located at https://github.com/antfu/skills
title: nuxt
canonical_url: https://skilld.dev/gh/onmax/claude-config/nuxt
last_updated: 2026-10-01T13:14:55.000Z
---

> **Skill from skilld.dev.** Follow the instructions below for this session. You do not need to install anything.
>
> Supporting files, fetch one when the Skill refers to it: [references/advanced-hooks.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/advanced-hooks.md), [references/advanced-layers.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/advanced-layers.md), [references/advanced-module-authoring.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/advanced-module-authoring.md), [references/best-practices-data-fetching.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/best-practices-data-fetching.md), [references/best-practices-ssr.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/best-practices-ssr.md), [references/core-cli.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-cli.md), [references/core-config.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-config.md), [references/core-data-fetching.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-data-fetching.md), [references/core-deployment.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-deployment.md), [references/core-directory-structure.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-directory-structure.md), [references/core-modules.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-modules.md), [references/core-routing.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-routing.md), [references/features-components-autoimport.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-components-autoimport.md), [references/features-components.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-components.md), [references/features-composables.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-composables.md), [references/features-server.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-server.md), [references/features-state.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-state.md), [references/rendering-modes.md](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/rendering-modes.md).
>
> If the user asked to install this Skill, run `npx skilld install onmax/claude-config/nuxt`. Install writes the Skill files into the project, so every session loads them.

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](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-directory-structure.md) |
| Configuration       | nuxt.config.ts, app.config.ts, aliases, compatibilityVersion, experimental | [core-config](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-config.md)                           |
| CLI Commands        | Dev server, build, generate, preview, and utility commands                 | [core-cli](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-cli.md)                                 |
| Routing             | File-based routing, dynamic routes, named views, layout props, middleware  | [core-routing](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-routing.md)                         |
| Data Fetching       | useFetch, useAsyncData, $fetch, createUseFetch factories, caching          | [core-data-fetching](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-data-fetching.md)             |
| Modules             | Creating and using Nuxt modules, Nuxt Kit utilities                        | [core-modules](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-modules.md)                         |
| Deployment          | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare       | [core-deployment](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/core-deployment.md)                   |

## Features

| Topic                    | Description                                                         | Reference                                                                      |
| ------------------------ | ------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| Composables Auto-imports | Vue/Nuxt composables, custom composables, `shared/`, useAnnouncer   | [features-composables](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-composables.md)                     |
| Components Auto-imports  | Component naming, lazy loading, hydration strategies                | [features-components-autoimport](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-components-autoimport.md) |
| Built-in Components      | NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, and more | [features-components](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-components.md)                       |
| State Management         | useState composable, SSR-friendly state, Pinia integration          | [features-state](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-state.md)                                 |
| Server Routes            | API routes, server middleware, Nitro server engine                  | [features-server](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/features-server.md)                               |

## Rendering

| Topic           | Description                                                       | Reference                                        |
| --------------- | ----------------------------------------------------------------- | ------------------------------------------------ |
| Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | [rendering-modes](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/rendering-modes.md) |

## Best Practices

| Topic                  | Description                                                       | Reference                                                                  |
| ---------------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------- |
| Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling    | [best-practices-data-fetching](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/best-practices-data-fetching.md) |
| SSR & Hydration        | Avoiding context leaks, hydration mismatches, composable patterns | [best-practices-ssr](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/best-practices-ssr.md)                     |

## Advanced

| Topic            | Description                                                        | Reference                                                            |
| ---------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- |
| Layers           | Extending applications with reusable layers                        | [advanced-layers](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/advanced-layers.md)                     |
| Lifecycle Hooks  | Build-time, runtime, and server hooks                              | [advanced-hooks](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/advanced-hooks.md)                       |
| Module Authoring | Publishable modules with Nuxt Kit, keyed composables, dependencies | [advanced-module-authoring](https://skilld.dev/api/skills-raw/onmax/claude-config/nuxt/references/advanced-module-authoring.md) |