Learn Nuxt by building. Every topic is real code you can read, copy, and run — work through the lessons in order, from pages and layouts to data fetching, server routes, middleware, and deployment.
Nuxt is the app framework built on Vue. Be comfortable with Vue (and ideally TypeScript) before starting.
Before you start
To practice the examples in this course on your computer:
Ctrl+`).pnpm create nuxt my-app (or npm create nuxt@latest my-app with npm) and accept the defaults. This creates a my-app folder with a ready-to-run project — the setup every example here is written for.my-app folder (File → Open Folder) and run pnpm dev (or npm run dev) in the terminal.app/ as each lesson shows — with the dev server running, http://localhost:3000 updates every time you save.Getting Started
Create a Nuxt app, learn the folders it gives you, and run the dev, build, and preview commands.
Pages & Routing
Turn files into routes with the pages directory, render them through app.vue, and nest folders to nest URLs.
Layouts
Share a shell across pages with the layouts directory, render page content with slot, and switch layouts per page.
Dynamic Routes
Generate pages from data with [param] files, read the value with useRoute, and match many segments with catch-all routes.
Linking & Navigation
Move between routes with NuxtLink, navigate from code with navigateTo, and highlight the active link.
Data Fetching
Load data with useFetch and useAsyncData, call your own APIs with $fetch, and control loading, refresh, and where it runs.
Server Routes (APIs)
Build API endpoints in the server directory with defineEventHandler — return JSON, read the body and query, and handle params.
State Management
Share state across components without leaking it between users — the server pitfall to avoid, and useState the right way.
Composables & Auto-imports
Understand Nuxt auto-imports, write your own reusable composables, and share logic across pages without import lines.
Route Middleware
Run code before a route loads — guard pages, redirect, and apply checks per page or globally with route middleware.
SEO & Head
Set the page title and meta tags with useHead and useSeoMeta, and build titles from your data.
Config, Runtime & Deployment
Configure Nuxt, keep secrets in runtimeConfig and .env, then build for a Node server or generate a fully static site.