Creating Single Page Applications (SPAs) with Vue.js — A Complete Beginner’s Guide

📘 Chapter 6: Optimizing and Deploying Your Vue SPA

🧭 What You’ll Learn

By the end of this chapter, you'll be able to:

• Prepare your Vue SPA for production
• Optimize build performance and bundle size
• Enable lazy loading and code splitting
• Use environment variables and build configs
• Deploy your Vue app to platforms like Netlify, Vercel, Firebase, and GitHub Pages
• Use post-deployment tools to monitor and improve performance

🚀 Why Optimize and Deploy?

Creating a Vue.js SPA is only half the journey. For your app to be effective and widely accessible, it must be:

• Fast: Quick to load and responsive
• Secure: No exposed environment secrets
• SEO-friendly: Especially for marketing-focused sites
• Portable: Easy to deploy on free or cloud-based platforms
• Maintainable: Easily update content without breaking functionality

🧱 Step 1: Build Your Vue App for Production

A. Vite-Based Projects

Use:

bash

npm run build

This generates a dist/ folder with your minified production-ready assets.

B. Vue CLI Projects

bash

npm run build

Output goes to the dist/ directory (same name, different build tool).

🔍 Inside the dist/ Folder

⚙️ Step 2: Optimize Performance

✅ A. Code Splitting with Lazy Loading

Break routes into smaller chunks:

js

const About = () => import('./views/About.vue')

This defers loading until the route is visited, reducing initial load time.

✅ B. Minimize and Tree Shake Dependencies

Ensure unused code is removed:

• Use only the required components from libraries
• Avoid large UI libraries unless essential
• Use ES Modules or unpkg CDN if only using 1–2 utilities

✅ C. Image Optimization

• Use modern formats: WebP, AVIF
• Compress images using tools like TinyPNG or ImageOptim
• Use <img loading="lazy"> or Vue-based lazy loaders

✅ D. Use .env Variables

Create .env.production:

env

VITE_API_URL=https://api.myapp.com

Access via:

js

console.log(import.meta.env.VITE_API_URL)

Never store sensitive keys (e.g., database passwords) in .env.

📊 Step 3: Analyze Your Bundle

Install rollup-plugin-visualizer:

bash

npm install --save-dev rollup-plugin-visualizer

Update vite.config.js:

js

import { visualizer } from 'rollup-plugin-visualizer'

export default {

  plugins: [visualizer({ open: true })]

}

Build again, and a visual report will show bundle sizes by module.

🧪 Step 4: Testing Before Deploying

• Open dist/index.html locally:

bash

npx serve dist

• Test responsiveness on mobile and tablets
• Run Lighthouse audit in Chrome DevTools for:
• Performance
• Accessibility
• Best Practices
• SEO

📤 Step 5: Deployment Options

✅ Option A: Netlify (Recommended)

1. Sign in at https://netlify.com
2. Connect your GitHub repository
3. Set build settings:

4. Deploy! Your app is live on a .netlify.app domain.

✅ Option B: Vercel

1. Go to https://vercel.com
2. Import Git repo
3. Vercel auto-detects Vue + Vite
4. No configuration required
5. Live in minutes

✅ Option C: Firebase Hosting

bash

npm install -g firebase-tools

firebase login

firebase init

• Choose Hosting
• Set public directory to dist
• Choose "No" for single-page fallback (or "Yes" if you use Vue Router in history mode)

Deploy:

bash

firebase deploy

✅ Option D: GitHub Pages

1. Install gh-pages:

bash

npm install --save-dev gh-pages

2. Add these to package.json:

json

"scripts": {

  "deploy": "gh-pages -d dist"

}

3. Run:

bash

npm run build

npm run deploy

🧠 SEO Tips for Vue SPAs

• Use vue-meta or @vueuse/head to dynamically update title, description
• Pre-render static pages using vite-plugin-ssr
• Use <meta> tags in index.html for fallback

🔐 Security Checklist

🛡️ Advanced Optimizations

• HTTP/2 support (auto with Netlify & Vercel)
• Use compression plugins (Gzip, Brotli)
• Add service workers using Vite PWA plugin
• Implement caching headers via Netlify/Vercel settings

📊 Lighthouse Score Benchmarks

Use this as a post-deployment benchmark for production sites.

✅ Summary

You’ve now learned how to:

• Optimize Vue apps using lazy loading, environment variables, and image compression
• Minify and tree-shake code for faster performance
• Deploy Vue SPAs to major platforms like Netlify, Vercel, Firebase, and GitHub Pages
• Monitor and audit performance using Lighthouse and bundle analysis tools