Nuxt Cheat Sheet
Quick reference for Nuxt.js: file-based routing, data fetching, server routes, middleware, and deployment. Essential patterns for Vue full-stack development.
Project Setup
| npx nuxi@latest init my-app | Create a new Nuxt project |
| npm run dev | Start development server on localhost:3000 |
| npm run build | Build for production (SSR or static) |
| npm run generate | Pre-render all routes as static HTML |
| nuxt.config.ts | Main config file for modules, plugins, and settings |
File-Based Routing
| pages/index.vue | Route: / (home page) |
| pages/about.vue | Route: /about |
| pages/users/[id].vue | Dynamic route: /users/:id (access via useRoute().params.id) |
| pages/[...slug].vue | Catch-all route: matches any nested path |
| <NuxtLink to="/about">About</NuxtLink> | Client-side navigation link component |
Data Fetching
| const { data } = await useFetch("/api/items") | Fetch data with SSR support and caching |
| const { data } = await useAsyncData("key", () => $fetch("/api")) | Named async data with custom fetcher |
| const { data, refresh } = useFetch(url) | Get refresh function to re-fetch on demand |
| useFetch(url, { lazy: true }) | Lazy fetch — load data after navigation completes |
| useFetch(url, { server: false }) | Client-only fetch — skip SSR for this request |
Server Routes & API
| server/api/hello.ts | API route: GET /api/hello |
| server/api/users.post.ts | POST-only API route: POST /api/users |
| export default defineEventHandler((event) => { ... }) | Define a server route handler |
| const body = await readBody(event) | Read request body in server handler |
| const query = getQuery(event) | Read query parameters (?key=value) |
Middleware & Plugins
| middleware/auth.ts | Route middleware — runs before navigation |
| definePageMeta({ middleware: "auth" }) | Apply middleware to a specific page |
| plugins/my-plugin.ts | Auto-loaded plugin — runs on app init |
| export default defineNuxtPlugin((nuxtApp) => { ... }) | Define a Nuxt plugin |
| definePageMeta({ layout: "admin" }) | Set a custom layout for a page |
Deployment
| NITRO_PRESET=node-server npx nuxt build | Build for Node.js server deployment |
| NITRO_PRESET=cloudflare-pages npx nuxt build | Build for Cloudflare Pages |
| NITRO_PRESET=vercel npx nuxt build | Build for Vercel serverless |
| nuxt.config.ts: ssr: false | Disable SSR — build as client-side SPA |
| nuxt.config.ts: routeRules: { "/api/**": { cors: true } } | Set per-route rules (caching, CORS, redirects) |
Step-by-Step Guide
Read Guide →