Nuxt on Vercel

You know React and Next.js, but your new codebase is full of .vue files. Translating familiar patterns syntax by syntax may produce working code while missing the conventions that make Nuxt productive.

This course maps the React patterns you already know to their idiomatic Nuxt equivalents.

The important differences are in the mental model: how data flows, how pages render, and where server state lives. You'll learn those differences by building the same feature in Nuxt and comparing it with the React approach.

What you'll build

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.