Skip to content
Back to Deployment

Deploying Vue 3 Apps

Build and deploy Vue 3 SPAs with Vite, including composition API, Pinia state, and Vue Router.

PlatformsBeginner

Why

Vue 3 with Vite produces highly optimized static bundles with fast HMR in dev and tree-shaken production builds. The ecosystem (Pinia, Vue Router) is lightweight and deployable to any static host.

Platform-as-a-Service adoption grew 24% in 2024 as teams shift from VM management to git-push deploys. the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research), and PaaS layers capture the majority of new workloads.

When

Choose Vue 3 for progressive enhancement, admin tools, and teams familiar with template syntax. Use Nuxt when SSR/SEO is needed.

How

1. Build — npm run build outputs dist/ with index.html + assets/ 2. Base URL — vite.config base for sub-path deploys 3. Router history — createWebHistory needs server SPA fallback 4. Deploy — upload dist/ to any static host (Vercel/Netlify/S3) 5. Env vars — import.meta.env.VITE_* at build time 6. Compress — enable Brotli/Gzip on host for JS/CSS

Example

// vite.config.ts import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], base: "/app/", build: { target: "es2020", cssCodeSplit: true }, }); // router — history mode needs SPA fallback import { createRouter, createWebHistory } from "vue-router"; const router = createRouter({ history: createWebHistory("/app/"), routes: [/* ... */], }); // vercel.json — SPA fallback { "rewrites": [{ "source": "/app/(.*)", "destination": "/app/index.html" }] }

Common Problems

  • ⚠Router 404 on refresh — createWebHistory without server SPA fallback config
  • ⚠Assets 404 in sub-path deploy — base not set to match deployment path
  • ⚠Pinia state lost on navigation — store not persisted with pinia-plugin-persistedstate

Best Practices

  • ✓Use createWebHashHistory for truly static hosts without rewrite capability (hash routing)
  • ✓Enable manualChunks in vite rollupOptions to split large vendor deps
  • ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit

FAQ