This guide walks you through deploying your Nuda Kit frontend to Vercel. Vercel provides the best deployment experience for Nuxt applications with automatic builds, previews, and global CDN.
Before deploying, ensure you have:
1. Log in to Vercel
Go to vercel.com and sign in with your GitHub account.
2. Import Your Project
Since Nuda Kit uses a monorepo structure with separate frontend and backend directories, you need to tell Vercel where your frontend code lives.
Set the Root Directory to:
frontend
This tells Vercel to only deploy the frontend folder.
Vercel should automatically detect Nuxt.js. If not, select it from the dropdown.
The default settings should work, but verify:
| Setting | Value |
|---|---|
| Framework Preset | Nuxt.js |
| Root Directory | frontend |
| Build Command | npm run build (default) |
| Output Directory | .output (default) |
| Install Command | npm install (default) |
Before deploying, add your environment variables in Vercel.
1. Expand the "Environment Variables" section
2. Add the following variable:
| Name | Value | Environment |
|---|---|---|
API_BASE_URL | https://your-backend-domain.com | Production |
https://your-backend-domain.com with your actual deployed backend URL. Do not include a trailing slash.| Environment | API_BASE_URL |
|---|---|
| Production | https://api.yourdomain.com |
| Preview | https://api-staging.yourdomain.com |
Click Deploy and wait for the build to complete. Vercel will:
frontend directoryThe first deployment usually takes 2-3 minutes.
Once deployed, Vercel will provide you with a URL like:
https://your-project.vercel.app
Visit the URL and verify:
To use your own domain:
app.yourdomain.com)Vercel will automatically provision an SSL certificate.
With GitHub connected, Vercel automatically:
| Trigger | Result |
|---|---|
Push to main | Production deployment |
| Push to other branches | Preview deployment |
| Pull request | Preview deployment with unique URL |
This enables you to test changes before merging to production.
| Variable | Required | Description |
|---|---|---|
API_BASE_URL | Yes | Your backend API URL (e.g., https://api.yourdomain.com) |
API_BASE_URL to communicate with your backend. All other configuration (Stripe, OAuth, etc.) is handled by the backend.| Issue | Solution |
|---|---|
| Build fails with "Cannot find module" | Ensure Root Directory is set to frontend |
| API calls return CORS errors | Add your Vercel domain to allowed origins in your backend |
| Pages show "500 Internal Server Error" | Check that API_BASE_URL is correct and backend is accessible |
| Environment variables not working | Redeploy after adding/changing environment variables |
| Old version still showing | Clear browser cache or wait for CDN propagation (~1 min) |
If you see CORS errors, ensure your backend allows requests from your Vercel domain. In your backend .env:
FRONTEND_URL=https://your-project.vercel.app
Or for multiple domains, update your CORS configuration to include all your frontend URLs.