Vue3 Production Deployment

To set up a Vue 3 app for production, follow these steps:

1️⃣ Install Vue 3 (If Not Already Installed)

If you haven't created your Vue 3 project yet, use Vite for better performance:

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

2️⃣ Configure vite.config.js for Production

Edit vite.config.js to optimize for production:

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

export default defineConfig({
    plugins: [vue()],
    server: {
        port: 3000, // Change if needed
    },
    build: {
        outDir: 'dist', // Output directory
        minify: 'terser', // Minification for better optimization
        sourcemap: false, // Set to `true` for debugging in production
    },
});

3️⃣ Build the Vue App

Run the following command to generate optimized production files:

npm run build

This creates a dist/ folder containing minified and optimized assets.

4️⃣ Serve the Built App Locally (For Testing)

Before deploying, test the build:

npm install -g serve
serve -s dist

5️⃣ Deploying Vue 3 App

Option 1: Deploy on Nginx (Recommended for VPS/Servers)

1️⃣ Copy dist/ folder to your server

2️⃣ Configure Nginx:

Edit /etc/nginx/sites-available/default (or your Nginx config):

server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/my-vue-app/dist;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

3️⃣ Restart Nginx:

sudo systemctl restart nginx

Option 2: Deploy on Firebase Hosting

1️⃣ Install Firebase CLI:

npm install -g firebase-tools

2️⃣ Initialize Firebase Hosting:

firebase login
firebase init hosting

3️⃣ Deploy:

firebase deploy

Option 3: Deploy on Vercel (Easiest)

1️⃣ Install Vercel CLI:

npm install -g vercel

2️⃣ Deploy:

vercel

Option 4: Deploy on Netlify

1️⃣ Install Netlify CLI:

npm install -g netlify-cli

2️⃣ Deploy:

netlify deploy --prod

6️⃣ (Optional) Enable Caching & Compression

For better performance, enable gzip compression in Nginx:

gzip on;
gzip_types text/plain application/javascript text/css;
gzip_vary on;

✅ Final Checklist Before Deployment

✔️ npm run build generates a dist/ folder

✔️ vite.config.js is optimized

✔️ Proper CORS settings for API requests

✔️ Cache and gzip enabled for better performance

✔️ Deployed to a hosting provider (Nginx, Firebase, Vercel, Netlify)