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 a Vite project from its vite.config.*, runs npm run build, and serves the output. Static apps are live in about 3 minutes. Nuxt is not auto-detected — a Nuxt project needs the nixpacks-node preset (or nixpacks) set on the project, after which its nuxt dependency is recognised and the app starts with node .output/server/index.mjs.
Static Vue (Vite)
Temps builds with npm run build and serves the dist/ output with compression and long-lived cache headers for hashed assets.
Vue CLI projects deployed through the generic Nixpacks path listen on port 3000, while the current backend preset metadata reports 8080. Set the project's exposed port to 3000. Vue projects detected as Vite use nginx on port 80 instead.
| Feature | How Temps handles it |
|---|---|
| Build | npm run build |
| Output | Serves dist/ |
| SPA routing | 404 → index.html fallback |
| Cache | Hashed assets get 1-year cache headers |
| HTTPS | Let's Encrypt, auto-renewed |
Nuxt SSR
Nuxt applications using server-side rendering run as Node.js containers:
| Feature | How Temps handles it |
|---|---|
| Build | npx nuxt build |
| Start | node .output/server/index.mjs |
| Port | PORT env var injected |
| Runtime config | NUXT_ 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:
| Pattern | Cache-Control | Use case |
|---|---|---|
/assets/*, /static/*, /_next/static/*, .chunk.*, .hash.* | public, max-age=31536000, immutable | Hashed assets that never change |
| Everything else | public, max-age=0, must-revalidate | HTML 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.