Vercel Logo

Deploy to Vercel

The app runs locally. The features work. The data flows. Now it needs to exist somewhere other than your laptop. If you've deployed a Next.js app to Vercel before, the process is nearly identical: push to GitHub, import the repo, set environment variables. Vercel auto-detects Nuxt just like it detects Next.js. The one caveat: the OAuth callback URL needs to point to your production domain instead of localhost.

Outcome

Deploy the Hot Springs Finder to Vercel with working authentication.

Fast Track

  1. Push the code to a GitHub repository
  2. Import the project in Vercel and set environment variables
  3. Update the GitHub OAuth callback URL for production

Hands-on exercise 5.4

Deploy the app and configure production authentication.

Requirements:

  1. Push your code to a GitHub repository
  2. Import the repo in Vercel (vercel.com/new)
  3. Set the three environment variables: NUXT_OAUTH_GITHUB_CLIENT_ID, NUXT_OAUTH_GITHUB_CLIENT_SECRET, NUXT_SESSION_PASSWORD
  4. Deploy and verify the app loads
  5. Update the GitHub OAuth app's callback URL to your production domain
  6. Test login on the deployed app

Implementation hints:

  • Vercel auto-detects Nuxt and configures the build settings. No custom configuration needed
  • Set environment variables in the Vercel dashboard under Project Settings > Environment Variables
  • The GitHub OAuth callback URL must exactly match your production URL: https://your-app.vercel.app/auth/github
  • You can add both localhost and production callback URLs to the same GitHub OAuth app, or create a separate one for production

Push your code to GitHub if you haven't already:

git remote add origin https://github.com/your-username/hot-springs-finder.git
git push -u origin main

Go to vercel.com/new and import the repository. Vercel detects the Nuxt framework and sets the build command (nuxt build) and output directory automatically.

Before deploying, add the environment variables:

VariableValue
NUXT_OAUTH_GITHUB_CLIENT_IDYour GitHub OAuth app Client ID
NUXT_OAUTH_GITHUB_CLIENT_SECRETYour GitHub OAuth app Client Secret
NUXT_SESSION_PASSWORDThe same 32+ character string from .env

Click Deploy. Vercel builds the app, runs nuxt build, and deploys the output. The build uses the Nitro Vercel preset automatically, which generates serverless functions for your server routes and static files for prerendered pages. This is the same serverless model you'd get with Next.js, just powered by Nitro under the hood instead of the Next.js build system.

Once deployed, you'll get a URL like https://hot-springs-finder.vercel.app. The browse page and detail pages should work immediately. But login won't work yet because GitHub still redirects to http://localhost:3000/auth/github.

Update the GitHub OAuth app:

  1. Go to GitHub Settings > Developer settings > OAuth Apps
  2. Find your Hot Springs Finder app
  3. Update the Authorization callback URL to https://your-app.vercel.app/auth/github

If you want both local development and production to work with the same OAuth app, GitHub lets you add multiple callback URLs. Add your production URL on a new line.

Preview deployments work too

Every pull request gets a preview deployment on Vercel. If you set environment variables for all environments (Production, Preview, Development), OAuth works on preview URLs too. The callback URL needs to match, though, which is trickier with dynamic preview URLs. For development, keeping a separate GitHub OAuth app for localhost is simpler.

Don't commit .env

The .env file is in .gitignore for a reason. Environment variables with secrets go in the Vercel dashboard, not in your repo. If you accidentally commit them, rotate the secrets immediately on GitHub.

Try It

  1. Visit your deployed URL. The home page should load with "Find your next soak"
  2. Click "Browse Hot Springs." All 17 springs should appear
  3. Click a spring to see the detail page
  4. Click "Log in." You should be redirected to GitHub for authorization
  5. After authorization, you should land on the springs page, logged in
  6. Favorite a spring. Visit /favorites. Your favorite should appear
  7. Leave a review. Refresh the page. The review should persist

If login fails, double-check the callback URL in your GitHub OAuth app settings. It must exactly match your Vercel URL, including the https:// prefix.

Commit

No code changes needed for deployment. If you added routeRules in the previous lesson, that's already committed.

Done-When

  • The app is deployed and accessible at a Vercel URL
  • The browse page loads with all 17 hot springs
  • GitHub OAuth login works on the production URL
  • Favorites, visited, and reviews work on the deployed app
  • Environment variables are set in the Vercel dashboard, not committed to the repo

Solution

No code changes. The deployment steps are:

  1. Push to GitHub
  2. Import in Vercel at vercel.com/new
  3. Set environment variables in the Vercel dashboard
  4. Deploy
  5. Update the GitHub OAuth callback URL to your production domain