Build and Deployment

This chapter covers building a Vue project into static files and deploying it, and building a Nuxt project with a Nitro preset to deploy as a Node.js server or a static site.

Vue projects: vite build

In a create-vue project, npm run build creates a production build with Vite; TypeScript projects also run type checking with vue-tsc. The output lands in dist/ as HTML plus JS and CSS files with content hashes in their names.

npm run build      # produce dist/
npm run preview    # serve the build locally to check it

Because dist/ contains only static files, you can host it on Nginx, object storage, a CDN or any static hosting service. If the app is served from a sub-path such as /app/, set base: "/app/" in vite.config.ts. Environment variables prefixed with VITE_ are inlined into the bundle at build time, so never put secrets in them.

SPA routing and server configuration

With Vue Router's createWebHistory, visiting or refreshing a URL such as /about makes the server look for a file at that path and return 404. Configure the server to fall back to index.html for unknown paths.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
}

Files under assets/ carry a content hash in their names, so long-lived caching is safe. Keep the cache lifetime for index.html short so new deployments show up right away.

Nuxt projects: nuxi build and Nitro

Nuxt builds with its server engine, Nitro. Running npm run build (nuxi build) writes server code and static assets together into .output/. With the default node-server preset, you can run the result directly with Node.js.

npm run build
node .output/server/index.mjs

# port and runtime config come from environment variables
PORT=8080 NUXT_API_SECRET=change-me node .output/server/index.mjs

.output/ already bundles the dependencies it needs, so there is no need to install node_modules on the server.

Choosing a preset

Nitro can build the same app for many deployment targets. Pick the target with nitro.preset in nuxt.config.ts or the NITRO_PRESET environment variable. On platforms such as Vercel, Netlify and Cloudflare, the build environment is often detected and the right preset selected automatically.