How to Deploy a Vue.js Application (Free)

Deploy Vue.js to Production for Free

Vue.js is a progressive JavaScript framework trusted by millions of developers. Whether you are building a simple single-page app or a complex dashboard, the production build is a folder of static HTML, CSS, and JavaScript files — which makes it a perfect candidate for static hosting.

PandaStack serves static sites directly from a global CDN with automatic HTTPS, no server to manage, and deployments triggered by every git push. Best of all, static site hosting on PandaStack is free.

Prerequisites

• Node.js 20+ installed locally
• A GitHub account
• PandaStack CLI: npm install -g @pandastack/cli

Step 1 — Create a Vue.js Project

Use the official Vue scaffolding tool:

npm create vue@latest my-vue-app

The wizard asks about TypeScript, Vue Router, Pinia, and testing tools. For this tutorial, select the defaults. Then:

cd my-vue-app
npm install
npm run dev

Visit http://localhost:5173 to confirm the app runs.

Step 2 — Build for Production

Vue uses Vite under the hood. The production build command compiles, tree-shakes, and minifies everything:

npm run build

This outputs static assets to the dist/ folder. Inspect what Vite produces:

ls dist/
# assets/  favicon.ico  index.html

That dist/ directory is everything you need to serve. No server required.

Step 3 — Configure pandastack.json

Create pandastack.json at the project root:

{
  "type": "static",
  "buildCommand": "npm run build",
  "outputDir": "dist"
}

• type: "static" tells PandaStack to serve the output via CDN rather than as a container.
• buildCommand runs before deployment so PandaStack builds the app server-side from your source.
• outputDir points to the folder that contains your built index.html.

Step 4 — Handle Client-Side Routing

If you are using Vue Router in history mode (no hash URLs), you need all routes to serve index.html. PandaStack handles this automatically for static sites — any path that does not match a file falls back to index.html, so Vue Router can take over on the client.

No extra configuration needed.

Step 5 — Set Up Environment Variables

Vue picks up variables prefixed with VITE_ at build time. Create a .env.production file:

VITE_API_BASE_URL=https://api.my-backend.pandastack.io

Access them in your app:

const apiUrl = import.meta.env.VITE_API_BASE_URL;

For sensitive values, set them in the PandaStack dashboard under Environment Variables — they are injected at build time and not committed to your repository.

Step 6 — Push to GitHub and Deploy

git init
git add .
git commit -m "Initial Vue.js app"
gh repo create my-vue-app --public --source=. --push

Deploy using the CLI:

panda deploy

Or open [dashboard.pandastack.io](https://dashboard.pandastack.io), click New Project, connect your GitHub repository, and PandaStack runs npm run build and deploys the dist/ folder to the CDN.

Step 7 — Continuous Deployment

From this point on, every push to your default branch automatically triggers a new build and deploy. The flow is:

# Make a change
echo "// update" >> src/App.vue
git add . && git commit -m "Update app"
git push

# PandaStack automatically:
# 1. Detects the push via GitHub integration
# 2. Runs: npm run build
# 3. Publishes dist/ to the CDN
# 4. Your live URL is updated within seconds

Step 8 — Preview Your Deployment

After a successful build, your app is live at a PandaStack-generated HTTPS URL. You can also verify the build output locally:

npm run preview
# http://localhost:4173

Check build logs in the dashboard or stream them via the CLI:

panda logs

Summary

Vue.js is one of the smoothest frameworks to deploy as a static site. With PandaStack, the workflow is: push to GitHub → PandaStack builds → CDN delivers. Free hosting, automatic HTTPS, and zero infrastructure to manage. Explore more at [docs.pandastack.io](https://docs.pandastack.io).