Nuxt on Vercel

Your first week at the new job is going fine until you clone the repo and see .vue files everywhere. You know React. You know Next.js. You can build anything in that world. But this codebase is Nuxt, and the patterns that kept you fast in React are about to make you slow here.

You could brute-force it. Copy a React pattern, translate it to Vue syntax, ship it. It'll work. It'll also fight the framework at every turn. Your PR reviews will come back with "this isn't how we do things in Nuxt" and you'll wonder what you're missing.

What you're missing isn't syntax. It's the mental model. Nuxt has opinions about how data flows, how pages render, how state lives on the server. Those opinions are good, and they'll make you faster once you stop resisting them. This course is the translator that gets you there.

What you'll actually build

Throughout this course, you'll build Hot Springs Finder, a full-stack Nuxt app for discovering hot springs around the world:

Project foundations:

• Scaffold a Nuxt 4 app and map its structure to what you know from Next.js
• Build pages, components, and layouts using Vue's reactivity model
• Navigate between routes with file-based routing

Server-powered data:

• Create server routes that serve hot spring data
• Fetch data with useFetch and useAsyncData
• Build dynamic detail pages and server-side filtering

Authentication:

• Wire up nuxt-auth-utils with GitHub OAuth
• Build login and logout flows with useUserSession
• Protect routes with middleware

User features:

• Save favorite hot springs with optimistic UI
• Track visited springs with personal stats
• Add and display user reviews

Performance and deployment:

• Debug with Nuxt DevTools
• Choose between SSR, CSR, and hybrid rendering
• Optimize performance and deploy to Vercel

Prerequisites

• Comfortable with React (components, hooks, state management)
• Familiar with Next.js basics (routing, data fetching)
• Node.js and pnpm installed
• A GitHub account (for OAuth)
• A Vercel account (free tier works)

Course sections

Section 1: Foundations

Get a Nuxt app running and learn how its file structure, routing, reactivity, and layouts compare to what you already know from React and Next.js.

Section 2: Data & Server

Build the public browsing experience: server routes, data fetching composables, dynamic pages, and search filtering.

Section 3: Authentication

Wire up GitHub OAuth with nuxt-auth-utils, build login flows, and protect routes with middleware.

Section 4: User Features

Add the authenticated experience: saving favorites, tracking visits, and leaving reviews on hot springs.

Section 5: Performance & Polish

Debug with Nuxt DevTools, understand rendering modes, optimize performance, and deploy to Vercel.