nuxt
Installation
Summary
Full-stack Vue framework with SSR, file-based routing, auto-imports, and universal deployment via Nitro.
- Covers core concepts including directory structure, configuration, CLI commands, file-based routing with middleware and layouts, and data fetching with useFetch and useAsyncData
- Supports three rendering modes: universal SSR, client-side SPA, and hybrid rendering with route-level control
- Includes auto-import systems for composables and components, built-in components like NuxtLink and NuxtPage, and server routes powered by Nitro
- Provides state management via useState composable, module authoring with Nuxt Kit, and deployment across Node.js, serverless, and edge platforms
SKILL.md
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
srcDirisapp/— Vue app code (app.vue,components/,composables/,pages/, etc.) lives underapp/, whileserver/,shared/,public/,modules/,layers/andnuxt.config.tsstay at the project root. The~/@aliases now point atapp/; use~~/@@for the root.
Core
| Topic | Description | Reference |
|---|---|---|
| Directory Structure | Nuxt 4 app/ srcDir, shared/, aliases, conventions |
core-directory-structure |
| Configuration | nuxt.config.ts, app.config.ts, aliases, compatibilityVersion, experimental | core-config |
| CLI Commands | Dev server, build, generate, preview, and utility commands | core-cli |
| Routing | File-based routing, dynamic routes, named views, layout props, middleware | core-routing |
| Data Fetching | useFetch, useAsyncData, $fetch, createUseFetch factories, caching | core-data-fetching |
| Modules | Creating and using Nuxt modules, Nuxt Kit utilities | core-modules |
| Deployment | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare | core-deployment |