nuxt
antfu/skills
Full-stack Vue framework with SSR, file-based routing, auto-imports, and universal deployment via Nitro.
What is nuxt?
Nuxt is a full-stack Vue framework providing server-side rendering, file-based routing, auto-imports, and a powerful module system built on Nitro. Use it when building Nuxt applications, server routes, data fetching with useFetch, middleware, or hybrid rendering scenarios.
- File-based routing with dynamic routes, named views, and layout props
- Server-side rendering (SSR) and hybrid rendering modes with universal deployment
- Auto-imports for Vue/Nuxt composables and components with lazy loading
- Server routes and API endpoints powered by Nitro server engine
- State management with useState composable and Pinia integration
- Module system for extending and reusing application logic
How to install nuxt
npx skills add https://github.com/antfu/skills --skill nuxt- Node.js environment
- Familiarity with Vue 3 fundamentals
- Understanding of SSR concepts (recommended)
How to use nuxt
- 1.Review the directory structure: app/ contains Vue code, root contains config and server/
- 2.Configure nuxt.config.ts for aliases, modules, and rendering mode
- 3.Create pages in app/pages/ for file-based routing and layouts in app/layouts/
- 4.Use useFetch or useAsyncData in components for data fetching with automatic caching
- 5.Create server routes in server/routes/ or server/api/ for backend endpoints
- 6.Use useState for SSR-safe state management and composables from app/composables/
Use cases
- Building full-stack Vue applications with server-side rendering and SEO optimization
- Creating API routes and server middleware alongside frontend code
- Implementing data fetching patterns with useFetch and useAsyncData with caching
- Deploying to multiple platforms (Node.js, serverless, edge) via Nitro
- Extending applications with reusable layers and custom Nuxt modules
- Full-stack Vue developers
- Frontend engineers building server-rendered applications
- Teams deploying to serverless or edge platforms
- Module and library authors extending Nuxt
- Developers migrating from or working with Nuxt 4.x
nuxt FAQ
In Nuxt 4, 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 ~ and @ aliases point to app/; use ~~ and @@ for the root.
Use useFetch or useAsyncData in components, which handle SSR-safe data fetching and caching. Avoid direct DOM access in setup; use composables that work in both server and client contexts.
Yes. Nuxt uses Nitro as its server engine, which supports universal deployment across Node.js, serverless (AWS Lambda, Vercel), and edge platforms (Cloudflare Workers).
Nuxt automatically imports Vue/Nuxt composables, custom composables from app/composables/, and components from app/components/ without explicit import statements.
Hybrid rendering allows you to use route rules to pre-render some routes at build time while keeping others dynamic, combining the benefits of SSR and static generation.
Full instructions (SKILL.md)
Source of truth, from antfu/skills.
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
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 |
Features
| Topic | Description | Reference |
|---|---|---|
| Composables Auto-imports | Vue/Nuxt composables, custom composables, shared/, useAnnouncer | features-composables |
| Components Auto-imports | Component naming, lazy loading, hydration strategies | features-components-autoimport |
| Built-in Components | NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, and more | features-components |
| State Management | useState composable, SSR-friendly state, Pinia integration | features-state |
| Server Routes | API routes, server middleware, Nitro server engine | features-server |
Rendering
| Topic | Description | Reference |
|---|---|---|
| Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | rendering-modes |
Best Practices
| Topic | Description | Reference |
|---|---|---|
| Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling | best-practices-data-fetching |
| SSR & Hydration | Avoiding context leaks, hydration mismatches, composable patterns | best-practices-ssr |
Advanced
| Topic | Description | Reference |
|---|---|---|
| Layers | Extending applications with reusable layers | advanced-layers |
| Lifecycle Hooks | Build-time, runtime, and server hooks | advanced-hooks |
| Module Authoring | Publishable modules with Nuxt Kit, keyed composables, dependencies | advanced-module-authoring |
Related skills
More from antfu/skills and the wider catalog.
vite
Next-generation frontend build tool with fast dev server and optimized production builds.
vue
Vue 3 Composition API with script setup, reactivity, and built-in components for modern SFCs.
vitest
Jest-compatible unit testing framework powered by Vite with native ESM, TypeScript, and JSX support.
vue-best-practices
Vue 3 best practices guide: Composition API, TypeScript, and component architecture for maintainable applications.
vueuse-functions
Apply VueUse composables to build concise, maintainable Vue.js and Nuxt features.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance and accessibility best practices.