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.

export default defineNuxtConfig({
  nitro: { preset: "node-server" },
  routeRules: {
    "/": { prerender: true },          // generate HTML at build time
    "/blog/**": { swr: 3600 },         // cache, revalidate in the background
    "/admin/**": { ssr: false },       // render on the client only
  },
});

Mixing rendering strategies per path with routeRules is one of Nuxt's strengths.

Deploying as a static site

To deploy to static hosting without a server, use nuxi generate. It crawls links, prerenders pages and writes HTML into .output/public/. In this mode server/api is not deployed, so rely on data available at build time or call external APIs.

npx nuxi generate
# upload .output/public/ to your static host

Deploying a Nuxt server with Docker

When running Nuxt as a Node.js server, a Docker image with separate build and runtime stages keeps things tidy.

FROM node:lts-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:lts-alpine
WORKDIR /app
COPY --from=build /app/.output ./.output
ENV NODE_ENV=production PORT=3000
EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]

Summary

• Build a Vue project into dist/ with npm run build, upload it to static hosting, and fall back to index.html for SPA routes.
• Nuxt's nuxi build produces .output/; with the node-server preset, run it with node .output/server/index.mjs.
• Choose the deployment target with a Nitro preset and per-path rendering with routeRules.
• To deploy without a server, generate a static site with nuxi generate.

Official docs: Vue Production Deployment, Vite: Deploying a Static Site, Nuxt Deployment, Nitro Deploy