nuxt
npx machina-cli add skill antfu/skills/nuxt --openclawFiles (1)
SKILL.md
3.4 KB
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 |
| Configuration | nuxt.config.ts, app.config.ts, runtime config, environment variables | core-config |
| CLI Commands | Dev server, build, generate, preview, and utility commands | core-cli |
| Routing | File-based routing, dynamic routes, navigation, middleware, layouts | core-routing |
| Data Fetching | useFetch, useAsyncData, $fetch, caching, refresh | 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 APIs, Nuxt composables, custom composables, utilities | features-composables |
| Components Auto-imports | Component naming, lazy loading, hydration strategies | features-components-autoimport |
| Built-in Components | NuxtLink, NuxtPage, NuxtLayout, 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 | Creating publishable Nuxt modules with Nuxt Kit | advanced-module-authoring |
Overview
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.
How This Skill Works
Nuxt boots a universal Vue app with Nitro as the server engine, enabling SSR, server routes, and deployment across environments. It uses a file-based routing system and auto-imports to reduce boilerplate; you write pages and API routes in a predictable structure and Nuxt handles hydration and client/server boundaries.
When to Use It
- Building a Nuxt 3 app that benefits from server-side rendering (SSR) and client hydration.
- Implementing server-side API routes or server middleware using Nitro.
- Leveraging useFetch, $fetch, or useAsyncData for data fetching with caching and SSR.
- Using file-based routing, auto-imports for components/composables to speed up development.
- Deploying across Node.js, serverless, or edge platforms with Nitro's universal deployment.
Quick Start
- Step 1: Create a Nuxt 3 project: npx nuxi init my-app
- Step 2: Install and start: cd my-app && npm install && npm run dev
- Step 3: Add a page and a server route (server/api/hello.ts) to see SSR and API routing in action
Best Practices
- Use useFetch with caching and refresh strategies to optimize SSR hydration and data freshness.
- Keep SSR hydration safe by avoiding browser-only globals during server-side rendering.
- Organize functionality with modular Nuxt Kits, modules, and reusable composables.
- Leverage middleware and server routes to implement authentication and authorization cleanly.
- Plan deployments with Nitro to ensure smooth hosting across Node.js, serverless, and edge environments.
Example Use Cases
- SEO-optimized marketing site using SSR for fast first paint and crawlability.
- E-commerce product pages with dynamic routes and server API for data fetching.
- Authentication flow protected by middleware across protected routes.
- Admin dashboard using SSR data fetching and client-side hydration for interactivity.
- Edge-friendly Nuxt app deployed via Nitro to run near users worldwide.
Frequently Asked Questions
Add this skill to your agents
