How to deploy Vue app to Vercel

npm install -g vercel

# Navigate to your Vue project
cd my-vue-app

# Deploy to Vercel
vercel

# Follow prompts:
# ? Set up and deploy "~/my-vue-app"? [Y/n] Y
# ? Which scope do you want to deploy to? Your Name
# ? Link to existing project? [y/N] N
# ? What's your project's name? my-vue-app
# ? In which directory is your code located? ./

# Production deployment
vercel --prod

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vue",
  "installCommand": "npm install"
}

# Add environment variable
vercel env add VITE_API_URL

# Add for production
vercel env add VITE_API_KEY production

// .env.production
VITE_API_URL=https://api.example.com
VITE_API_KEY=your-production-key

// Use in Vue
const apiUrl = import.meta.env.VITE_API_URL

{
  "routes": [
    {
      "src": "/[^.]+",
      "dest": "/",
      "status": 200
    }
  ]
}

# Add custom domain
vercel domains add yourdomain.com

# Vercel provides DNS configuration:
# Add these records to your DNS:
# A    @    76.76.21.21
# CNAME www cname.vercel-dns.com

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia']
        }
      }
    },
    chunkSizeWarningLimit: 1000
  }
})

# Push feature branch
git checkout -b feature/new-ui
git push origin feature/new-ui

# Vercel automatically creates preview URL:
# https://my-vue-app-git-feature-new-ui-username.vercel.app

# Set production branch (default: main)
vercel --prod

# Or configure in vercel.json
{
  "github": {
    "silent": false,
    "autoAlias": true
  },
  "git": {
    "deploymentEnabled": {
      "main": true,
      "staging": false
    }
  }
}

// api/users.js
export default function handler(req, res) {
  res.status(200).json([
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ])
}

<script setup>
import { ref, onMounted } from 'vue'

const users = ref([])

onMounted(async () => {
  const response = await fetch('/api/users')
  users.value = await response.json()
})
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

# List deployments
vercel ls

# Promote specific deployment to production
vercel promote <deployment-url>

# Or via Dashboard:
# 1. Go to Deployments
# 2. Find previous deployment
# 3. Click "Promote to Production"

# View deployment logs
vercel logs <deployment-url>

# Real-time logs
vercel logs --follow

# View project logs in Dashboard:
# Project → Deployments → Click deployment → Logs