Deploy Vue.js on Your Own Server

Deploy Vue.js applications built with Vite or Nuxt. Static Vue apps are served from an optimized web server. Nuxt SSR apps run as Node.js containers.


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?