---
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-05-03T10:08:33.686Z"
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

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.


---

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