playbooks

home / skills / antfu / skills / nuxt

nuxt skill

/skills/nuxt

This skill helps you build and optimize Nuxt apps with SSR, routing, and data fetching patterns across server routes and components.

npx playbooks add skill antfu/skills --skill nuxt

Review the files below or copy the command above to add this skill to your agents.

Files (20)
SKILL.md
3.4 KB
---
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.1.28"
  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 3.x, generated at 2026-01-28.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Directory Structure | Project folder structure, conventions, file organization | [core-directory-structure](references/core-directory-structure.md) |
| Configuration | nuxt.config.ts, app.config.ts, runtime config, environment variables | [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, navigation, middleware, layouts | [core-routing](references/core-routing.md) |
| Data Fetching | useFetch, useAsyncData, $fetch, caching, refresh | [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 APIs, Nuxt composables, custom composables, utilities | [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, 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 | Creating publishable Nuxt modules with Nuxt Kit | [advanced-module-authoring](references/advanced-module-authoring.md) |

Overview

This skill surfaces practical guidance and inspections for Nuxt 3.x projects, focusing on full-stack workflows, SSR, and Nitro deployments. It helps developers understand directory layout, configuration, routing, data fetching, and server routes so they can build predictable, production-ready Nuxt apps.

How this skill works

The skill inspects common Nuxt concepts and files: nuxt.config.ts, app config, composables, pages, layouts, server/ directory routes, and deployment output from Nitro. It highlights where to apply useFetch/useAsyncData, when to use middleware, and how rendering modes affect hydration and caching. It also surfaces best-practice patterns for modules, auto-imports, and state management.

When to use it

  • When working on a Nuxt 3.x application with SSR or hybrid rendering
  • When creating or debugging server routes, API endpoints, or Nitro handlers
  • When optimizing data fetching with useFetch, useAsyncData, or $fetch
  • When authoring modules, layers, or extending the app via nuxt.config.ts
  • When preparing the app for deployment across Node, serverless, or edge platforms

Best practices

  • Prefer useAsyncData or useFetch with clear cache keys and error handling for SSR consistency
  • Keep server logic in server/ routes and avoid leaking runtime secrets to the client; use runtimeConfig for environment values
  • Use file-based routing and middleware to enforce layout and auth patterns consistently
  • Auto-import composables and components to reduce boilerplate; maintain a predictable folder structure for discoverability
  • Test rendering modes early: validate SSR hydration locally and simulate edge deployments with Nitro where possible

Example use cases

  • Audit a Nuxt project to locate performance bottlenecks between SSR and client hydration
  • Migrate page data fetching to useAsyncData with caching and retry strategies
  • Create server API routes under server/ to handle form submissions or proxy requests securely
  • Build a Nuxt module or Layer to encapsulate UI primitives and runtime configuration for reuse across apps
  • Configure deployment settings for Nitro to target Node, Vercel, or Cloudflare Workers with platform-specific adapters

FAQ

Which composable should I use for SSR data?

Use useAsyncData for SSR-friendly data fetching with integrated caching and server-side resolution; useFetch is convenient for composables but behaves similarly when used correctly.

Where should secrets and environment variables live?

Place secrets in runtimeConfig (nuxt.config.ts) on the server side and only expose public keys via public runtimeConfig; never commit secrets to source files.