Deploying a Vue App
Build and deploy a Vue application to static hosting, and understand SSR deployment with Nuxt.
Building for Production
npm run build# Outputs static files to dist/For a plain Vue + Vite SPA, this produces a folder of static HTML, CSS, and JavaScript — no server-side runtime is required to serve it.
Deploying a Static SPA
Any static host works: Netlify, Vercel, GitHub Pages, or a plain CDN/S3 bucket. Most platforms auto-detect a Vite project and run npm run build automatically on push.
Netlify / Vercel
Connect a Git repo; both auto-detect Vite and deploy on every push.
GitHub Pages
Good for simple demos and open-source project sites, free of charge.
A CDN / Object Storage
Upload the dist/ folder directly to S3, Cloudflare Pages, or similar.
The SPA Routing Gotcha
With client-side routing (Vue Router's history mode), directly visiting a deep URL like /about sends that request to the server, which knows nothing about Vue Router's in-app paths — you must configure the host to redirect all unmatched requests to index.html, letting Vue Router take over from there.
# public/_redirects (Netlify example)/* /index.html 200Deploying a Nuxt (SSR) App
A Nuxt app in SSR mode needs an actual Node.js server (or a serverless/edge platform that supports one) to render pages per request, unlike a plain static SPA.
| Platform | Notes |
|---|---|
| Vercel / Netlify | Both have first-class Nuxt support, deploying its server as serverless functions automatically. |
| A Node.js server | node .output/server/index.mjs after npx nuxi build, for full control over hosting. |
| Static generation (nuxi generate) | Pre-renders every route to static HTML if the whole site doesn't need per-request rendering. |
A Pre-Deployment Checklist
- Run npm run build locally and fix any errors or warnings.
- Configure SPA fallback routing if using Vue Router in history mode on static hosting.
- Set environment variables in your hosting platform's dashboard.
- Test the production build locally with npm run preview before deploying.
FAQs
No — a plain Vue + Vite app builds to static files and can be served from any static host or CDN, with no Node.js runtime needed in production.
No — Vercel supports Vue, Nuxt, and many other frameworks with equally strong first-class deployment support.
Summary
A plain Vue SPA deploys as static files to any host, while Nuxt SSR needs a Node.js-capable platform — both are well-supported across major hosting providers. In the final lesson, you'll review best practices and common mistakes that tie this whole course together.