Index of every page on this site: llms.txt
All skills
antfu avatar

/nuxt

@7de210b official
by Anthony Fuantfu/skills6k stars
342
Run it yourself

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.

Use this Skill: https://skilld.dev/gh/antfu/skills/nuxt

Nothing lands on disk. Nothing to clean up.

Fork this Skill

Edit a local copy. It keeps the author and licence.

referencescore-cli.md

≈1.2k tokens on demand. Your agent reads this file only when SKILL.md points to it.

CLI Commands

Nuxt provides CLI commands via nuxi (or npx nuxt) for development, building, and project management.

The CLI reference now lives in the nuxt/cli repo (its docs moved out of the main Nuxt repo). Commands and flags are unchanged.

Project Initialization

Create New Project

# Interactive project creation
npx nuxi@latest init my-app

# With specific package manager
npx nuxi@latest init my-app --packageManager pnpm

# With modules
npx nuxi@latest init my-app --modules "@nuxt/ui,@nuxt/image"

# From template
npx nuxi@latest init my-app --template v3

# Skip module selection prompt
npx nuxi@latest init my-app --no-modules

Options:

Option Description
-t, --template Template name
--packageManager npm, pnpm, yarn, or bun
-M, --modules Modules to install (comma-separated)
--gitInit Initialize git repository
--no-install Skip installing dependencies

Development

Start Dev Server

# Start development server (default: http://localhost:3000)
npx nuxt dev

# Custom port
npx nuxt dev --port 4000

# Open in browser
npx nuxt dev --open

# Listen on all interfaces (for mobile testing)
npx nuxt dev --host 0.0.0.0

# With HTTPS
npx nuxt dev --https

# Clear console on restart
npx nuxt dev --clear

# Create public tunnel
npx nuxt dev --tunnel

Options:

Option Description
-p, --port Port to listen on
-h, --host Host to listen on
-o, --open Open in browser
--https Enable HTTPS
--tunnel Create public tunnel (via untun)
--qr Show QR code for mobile
--clear Clear console on restart

Environment Variables:

  • NUXT_PORT or PORT - Default port
  • NUXT_HOST or HOST - Default host

Building

Production Build

# Build for production
npx nuxt build

# Build with prerendering
npx nuxt build --prerender

# Build with specific preset
npx nuxt build --preset node-server
npx nuxt build --preset cloudflare-pages
npx nuxt build --preset vercel

# Build with environment
npx nuxt build --envName staging

Output is created in .output/ directory.

Static Generation

# Generate static site (prerenders all routes)
npx nuxt generate

Equivalent to nuxt build --prerender. Creates static HTML files for deployment to static hosting.

Preview Production Build

# Preview after build
npx nuxt preview

# Custom port
npx nuxt preview --port 4000

Utilities

Prepare (Type Generation)

# Generate TypeScript types and .nuxt directory
npx nuxt prepare

Run after cloning or when types are missing.

Type Check

# Run TypeScript type checking
npx nuxt typecheck

Analyze Bundle

# Analyze production bundle
npx nuxt analyze

Opens visual bundle analyzer.

Cleanup

# Remove generated files (.nuxt, .output, node_modules/.cache)
npx nuxt cleanup

Info

# Show environment info (useful for bug reports)
npx nuxt info

Upgrade

# Upgrade Nuxt to latest version
npx nuxt upgrade

# Upgrade to nightly release
npx nuxt upgrade --nightly

Module Commands

Add Module

# Add a Nuxt module
npx nuxt module add @nuxt/ui
npx nuxt module add @nuxt/image

Installs and adds to nuxt.config.ts.

Build Module (for module authors)

# Build a Nuxt module
npx nuxt build-module

DevTools

# Enable DevTools globally
npx nuxt devtools enable

# Disable DevTools
npx nuxt devtools disable

Common Workflows

Development

# Install dependencies and start dev
pnpm install
pnpm dev  # or npx nuxt dev

Production Deployment

# Build and preview locally
pnpm build
pnpm preview

# Or for static hosting
pnpm generate

After Cloning

# Install deps and prepare types
pnpm install
npx nuxt prepare

Environment-specific Builds

# Development build
npx nuxt build --envName development

# Staging build
npx nuxt build --envName staging

# Production build (default)
npx nuxt build --envName production

Corresponds to $development, $env.staging, $production in nuxt.config.ts.

Layer Extension

# Dev with additional layer
npx nuxt dev --extends ./base-layer

# Build with layer
npx nuxt build --extends ./base-layer
<!-- Source references: - https://github.com/nuxt/cli - https://nuxt.com/docs/api/commands -->

Source: SKILL.md on GitHub

Skill behaviors

No rule matched.

skilld matched fixed text patterns in SKILL.md and file names. Patterns miss obfuscated code.

skilld run checks every file with the same patterns. It asks for approval before it loads a Skill with a behavior marked Needs approval.

Third-party checks

No alerts3d5 checks · Risk SAFE
  • Gen Agent Trust Hub3d

    This skill is a collection of documentation and reference materials for the Nuxt framework (version 5). It contains technical guides on routing, configuration, data fetching, and deployment, intended to assist an AI agent in working with Nuxt projects. No security risks were identified.

  • Socket3d

    No alerts

  • Snyk3d

    Risk: LOW · No issues

  • Runlayer8mo

    3/20 files flagged

  • ZeroLeaks6mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 7de210b. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last week.

Activeupdated last month

Capability

Other metadata
metadata
{
  "author": "Anthony Fu",
  "version": "2026.9.25",
  "source": "Generated from https://github.com/nuxt/nuxt, scripts located at https://github.com/antfu/skills"
}

Topics

  • Nuxt
  • Vue
  • ssr
  • full-stack
  • file-based-routing
  • nitro
  • auto-imports
  • server-routes
  • composables
  • state-management

README badge

README badge for antfu/skills/nuxt

What it does

This skill provides comprehensive guidance on Nuxt 3, a full-stack Vue framework with server-side rendering, file-based routing, auto-imports, and Nitro-powered server deployment. It covers directory structure, configuration, routing, data fetching, state management, server routes, rendering modes, and module authoring across core, feature, and advanced sections.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover Nuxt 2?
No. This skill is based on Nuxt 3.x, generated at 2026-01-28.
What server runtime does Nuxt use?
Nuxt uses Nitro as its server engine, which supports universal deployment across Node.js, serverless, and edge platforms.
Does this skill cover server routes and API endpoints?
Yes. The skill includes guidance on server routes, API routes, server middleware, and the Nitro server engine.
What rendering modes are supported?
The skill covers universal (SSR), client-side (SPA), hybrid rendering, and route rules for controlling how pages are rendered.
Does this skill explain state management?
Yes. It covers the useState composable, SSR-friendly state patterns, and Pinia integration.

Generated from the current SKILL.md. These answers refresh after source changes.