Framework

Vue (Vite)

Vue 3 apps built with Vite, served as static files by Nginx.

Container port80

Requirements

package.json with a "build" script

"build": "vite build". Output goes to dist/.

Output goes to dist/

Do not override the Vite output directory in vite.config.ts.

Demo app

A minimal app that is ready to push and deploy. Copy the files below into a new repository, commit, and deploy — it should go live without any changes.

Quickstart

npm create vue@latest my-vue-app

src/App.vue

<template>
  <div class="container">
    <h1>Hello from DropDeploy!</h1>
    <p>Vue 3 + Vite app is live.</p>
  </div>
</template>

<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  gap: 0.5rem;
}
h1 { color: #10b981; }
p  { color: #94a3b8; }
</style>

src/main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Run npm create vue@latest and follow the prompts. Replace src/App.vue with the file above to verify deployment.

Build & start commands

DropDeploy runs these steps inside the container when you click Deploy.

npm install
npm run build
# Output in dist/ is served by Nginx — no start command needed

Environment variables

Set these in Project → Env Vars in the dashboard. Never commit secrets.

Variable	Required	Description
VITE_*	No	Prefix env vars with VITE_ to expose them at build time.

Common issues

Vue Router history mode — 404 on refresh

Nginx is configured with try_files so history mode works correctly.

React (Vite)Svelte (Vite)