Vue on Vercel

Push your Express code to GitHub

Render needs a repository to deploy from. Make sure your Express project has a package.json with a start script.

{
  "name": "my-rest-api",
  "scripts": {
    "start": "node index.js"   // ← Render runs this
  },
  "dependencies": {
    "express": "^4.18.0"
  }
}

Create a Render Web Service

Log in to render.com, click New + → Web Service, and connect your GitHub repo.

Configure Deployment Settings

Set the following in the Render dashboard:

Add CORS middleware (before deploy)

Your Express app needs CORS configured to allow requests from your frontend URL. Install cors and configure it:

const cors = require('cors');

// Allow requests from your Vercel Vue frontend
// Start with a wildcard for testing, then lock it down
const allowedOrigins = [
  'http://localhost:5173',
  'https://your-vue-app.vercel.app', // ← replace after Vercel deploy
];

app.use(cors({
  origin: allowedOrigins,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true,
}));

Deploy and capture the URL

Click Deploy. Render will build and start your server. After a minute, your API will be live at a URL like:

https://my-rest-api.onrender.com

Test it by visiting https://my-rest-api.onrender.com/api/users in your browser.

Create a Vue + Vite project

If you haven't already, scaffold a Vue project with Vite:

npm create vue@latest my-vue-app
cd my-vue-app
npm install

Select TypeScript, Router, Pinia if you want — or keep it minimal.

Push your Vue app to GitHub

Vercel needs a repository. Push your project to GitHub.

Import the repo on Vercel

Go to vercel.com, click Add New → Project, and import your GitHub repository. Vercel automatically detects Vue.js and sets the build command to npm run build.

Set the Environment Variable

This is the critical step. Add the Render URL as VITE_API_URL in the Vercel dashboard:

The VITE_ prefix tells Vite to expose this variable to the browser at build time.

Use the env variable in your Vue components

In your Vue components, use import.meta.env.VITE_API_URL instead of hardcoding the URL:

// ✅ Correct — uses the env variable
const API_URL = import.meta.env.VITE_API_URL;

const response = await fetch(`${API_URL}/api/users`);
const data = await response.json();

// ❌ Wrong — never hardcode the URL
// const response = await fetch('http://localhost:5173/api/users');

Deploy and capture the URL

Click Deploy. Vercel will build your Vue app and give you a URL like:

https://my-vue-app.vercel.app