---
title: "Nuxt on Vercel"
description: "Translate your React and Next.js skills to Nuxt. Build a hot springs finder app using idiomatic Nuxt patterns, from reactivity to auth to deployment."
canonical_url: "https://vercel.com/academy/nuxt-on-vercel"
md_url: "https://vercel.com/academy/nuxt-on-vercel.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-10-17T13:06:31.985Z"
content_type: "course"
lessons: 18
estimated_time: 
lesson_urls:
  - "https://vercel.com/academy/nuxt-on-vercel/nuxt-project-setup.md"
  - "https://vercel.com/academy/nuxt-on-vercel/pages-and-routing.md"
  - "https://vercel.com/academy/nuxt-on-vercel/components-and-reactivity.md"
  - "https://vercel.com/academy/nuxt-on-vercel/layouts-and-navigation.md"
  - "https://vercel.com/academy/nuxt-on-vercel/server-routes.md"
  - "https://vercel.com/academy/nuxt-on-vercel/data-fetching.md"
  - "https://vercel.com/academy/nuxt-on-vercel/dynamic-routes.md"
  - "https://vercel.com/academy/nuxt-on-vercel/search-and-filtering.md"
  - "https://vercel.com/academy/nuxt-on-vercel/auth-setup.md"
  - "https://vercel.com/academy/nuxt-on-vercel/login-flow.md"
  - "https://vercel.com/academy/nuxt-on-vercel/route-protection.md"
  - "https://vercel.com/academy/nuxt-on-vercel/saving-favorites.md"
  - "https://vercel.com/academy/nuxt-on-vercel/visited-tracking.md"
  - "https://vercel.com/academy/nuxt-on-vercel/reviews.md"
  - "https://vercel.com/academy/nuxt-on-vercel/debugging-tools.md"
  - "https://vercel.com/academy/nuxt-on-vercel/rendering-modes.md"
  - "https://vercel.com/academy/nuxt-on-vercel/optimization.md"
  - "https://vercel.com/academy/nuxt-on-vercel/deploy-nuxt-to-vercel.md"
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# 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.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)