Nuxt.js is a Vue.js meta-framework built on Vite and Nitro, engineered to streamline the development of universal, server-side rendered, and static web applications. By enforcing opinionated conventions—such as file-based routing, auto-imports, and server API routes—Nuxt eliminates boilerplate and accelerates development while retaining full Vue 3 capabilities. The Nitro server engine unifies SSR, API routes, and deployment presets into a cohesive, production-ready architecture. What sets Nuxt apart is its hybrid rendering model: you can mix SSR, SSG, ISR, and CSR strategies per route, achieving optimal performance and SEO without manual configuration. Understanding how Nuxt's auto-import system, composables, and server/client boundaries interact is critical for leveraging its full power—especially when managing state hydration, TypeScript integration, and the extensive modules ecosystem that extends Nuxt's core without reinventing common patterns.
What This Cheat Sheet Covers
This topic spans 15 focused tables and 137 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Project Structure and Core Directories
The pages/ directory activates Nuxt's file-based router; without it, Nuxt runs as a single-page app with manual routing. The server/ directory creates API endpoints and middleware handled by Nitro, while components/ enables Vue component auto-registration. Each directory follows strict naming conventions; understanding these conventions is essential because they directly control what Nuxt generates at build time.
| Directory | Example | Description |
|---|---|---|
pages/about.vuepages/[id].vue | • Creates file-based routes automatically • each .vue file becomes a route. Dynamic segments use [param] syntax• Presence of this directory enables vue-router. | |
layouts/default.vuelayouts/blog.vue | • Defines reusable page wrappers • use <NuxtPage /> to render child routes• Pages select layouts via definePageMeta({ layout: 'blog' }). | |
server/api/users.tsserver/api/user/[id].ts | • Creates API endpoints automatically • file structure mirrors route paths • Uses h3 handlers • returns JSON natively without boilerplate | |
server/middleware/log.ts | • Runs on every server request before route handlers • executes in alphabetical order • Used for logging, auth checks, or header modifications | |
components/TheHeader.vuecomponents/ui/Button.vue | • Vue components are auto-imported by name • nested folders create namespaced imports ( <UiButton />). No manual import statements needed |