Deploy Vue.js on Your Own Server

Push to your branch and Temps takes it from there — static Vue apps built with Vite are served from the dist/ directory with compression and long-lived cache headers, while Nuxt SSR apps run as Node.js containers with automatic HTTPS. No Dockerfile needed.


Quickstart

From your project root, deploy with your preferred package manager:

npx @temps-sdk/cli up

Temps auto-detects Vite and Nuxt, runs npm run build, and serves the output. Static apps are live in about 3 minutes.


Static Vue (Vite)

Temps builds with npm run build and serves the dist/ output with compression and long-lived cache headers for hashed assets.

FeatureHow Temps handles it
Buildnpm run build
OutputServes dist/
SPA routing404 → index.html fallback
CacheHashed assets get 1-year cache headers
HTTPSLet's Encrypt, auto-renewed

Nuxt SSR

Nuxt applications using server-side rendering run as Node.js containers:

FeatureHow Temps handles it
Buildnpx nuxt build
Startnode .output/server/index.mjs
PortPORT env var injected
Runtime configNUXT_ env vars supported

Environment variables

# Runtime config (Nuxt)
npx @temps-sdk/cli environments vars set NUXT_PUBLIC_API_URL "https://api.example.com" -e production

# Build-time (Vite)
npx @temps-sdk/cli environments vars set VITE_API_URL "https://api.example.com" -e production

SPA routing

Static Vue apps (Vite) use client-side routing, handled automatically by the proxy.

Single-page applications use client-side routing — paths like /about or /dashboard/settings do not correspond to files on disk. The Temps proxy handles this automatically.

When a request arrives for a path that:

  • Has no file extension (e.g. /about, not /about.css)
  • Does not match any file on disk

…the proxy serves index.html instead, and your client-side router (React Router, Vue Router, etc.) takes over. This works out of the box — you do not need _redirects, vercel.json, or any rewrite rules.


Compression & caching

The Temps proxy applies performance optimizations to all static file responses automatically:

  • Gzip compression for text-based files over 1 KB (HTML, CSS, JavaScript, JSON, XML, SVG) when the browser supports it.
  • ETags based on each file's content hash, so unchanged files return 304 Not Modified.

Cache-Control headers are set based on the file path:

PatternCache-ControlUse case
/assets/*, /static/*, /_next/static/*, .chunk.*, .hash.*public, max-age=31536000, immutableHashed assets that never change
Everything elsepublic, max-age=0, must-revalidateHTML files and non-hashed resources

Your hashed JS and CSS bundles are cached for a year, while index.html is always revalidated so new deployments are picked up immediately.


Next Steps

Was this page helpful?