Deploy Vue

This guide will help you deploy a Vue application to Deployxa.

Overview

Vue.js is a progressive JavaScript framework for building user interfaces. Deployxa provides optimized deployments for Vue applications with automatic configuration.

Features:

• Automatic framework detection
• Vue 3 and Vue 2 support
• Vite and Vue CLI support
• Static site generation
• Automatic HTTPS
• Global CDN

Prerequisites

• A Vue application (Vue 3 recommended)
• A GitHub repository with your code
• A Deployxa account

Quick Start

1. Create Your Vue App

Using Vite (Recommended):

npm create vue@latest my-vue-app
cd my-vue-app
npm install

Using Vue CLI:

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

2. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/my-vue-app.git
git push -u origin main

3. Deploy to Deployxa

1. Go to Deployxa Dashboard
2. Click "New Project"
3. Select your GitHub repository
4. Deployxa will automatically detect Vue
5. Click "Deploy"

Your app will be live in under 30 seconds!

Configuration

Detected Settings

Deployxa automatically detects these settings:

Setting	Value
Framework	Vue
Build Command	npm run build
Output Directory	dist
Start Command	Static site (no server needed)
Port	80

Custom Configuration

If you need to customize settings:

1. Go to Project → Settings → Build
2. Modify settings as needed
3. Save changes

Example Custom Settings:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm ci"
}

Environment Variables

Adding Environment Variables

1. Go to Project → Environment
2. Click "Add Variable"
3. Enter key and value
4. Click "Save"

Common Vue Environment Variables:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vue App
VUE_APP_API_URL=https://api.example.com
VUE_APP_TITLE=My Vue App

Note:

• Vite uses VITE_ prefix
• Vue CLI uses VUE_APP_ prefix
• Variables are embedded at build time

Using Environment Variables

In Vite:

const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

In Vue CLI:

const apiUrl = process.env.VUE_APP_API_URL;
const appTitle = process.env.VUE_APP_TITLE;

Build Process

What Happens During Build

1. Install Dependencies: npm install or npm ci
2. Run Build: npm run build
3. Optimize Assets: Minify JS, CSS, images
4. Generate Static Files: Create optimized HTML, JS, CSS
5. Deploy to CDN: Distribute to global edge network

Build Output

Vue generates:

• dist/ - Build output directory
• index.html - Main HTML file
• assets/ - JavaScript and CSS bundles
• Static assets (images, fonts)

Routing

Client-Side Routing

For single-page applications with routing:

Vue Router:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

Handling 404s

Configure your deployment to handle client-side routing:

Option 1: Redirect to index.html

Deployxa automatically handles this for Vue apps.

Option 2: Custom 404 page

Create a 404.html file in your public directory.

Custom Domains

Adding a Custom Domain

1. Go to Project → Domains
2. Click "Add Domain"
3. Enter your domain (e.g., example.com)
4. Configure DNS records
5. Wait for verification

DNS Configuration

For Apex Domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For Subdomain (www.example.com):

Type: CNAME
Name: www
Value: cname.deployxa.com

SSL Certificate

Deployxa automatically provisions SSL certificates:

• Free Let's Encrypt certificates
• Automatic renewal
• HTTPS enforced
• Wildcard support

Performance Optimization

Code Splitting

Split your code for faster initial loads:

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
);

Lazy Loading Routes

const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
];

Image Optimization

Use optimized images:

<template>
  <img src="@/assets/image.jpg?w=500&h=500&format=webp" />
</template>

Bundle Analysis

Analyze your bundle size:

npm install --save-dev rollup-plugin-visualizer

Add to vite.config.js:

import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [
    visualizer({ open: true })
  ]
};

Monitoring

Viewing Logs

1. Go to Project → Logs
2. Select log type:
   • Build Logs: Deployment process
   • Runtime Logs: Client-side errors (if configured)

Monitoring Metrics

1. Go to Project → Analytics
2. View metrics:
   • Page views
   • Unique visitors
   • Bandwidth usage
   • Response times

Error Tracking

Implement error tracking:

Using Sentry:

npm install @sentry/vue

import * as Sentry from "@sentry/vue";
import { createApp } from 'vue';

const app = createApp(App);

Sentry.init({
  app,
  dsn: "YOUR_SENTRY_DSN",
});

Troubleshooting

Build Failed: Module Not Found

Problem: Module not found: Can't resolve 'package-name'

Solution:

1. Check package.json has the dependency
2. Run npm install package-name locally
3. Commit and push changes
4. Redeploy

Blank Page After Deployment

Problem: Application shows blank page

Solution:

1. Check browser console for errors
2. Verify build output directory is correct
3. Ensure index.html is in the root of output directory
4. Check environment variables are set correctly

Routing Not Working

Problem: Direct URL access returns 404

Solution:

• Deployxa automatically handles client-side routing
• If issue persists, check routing configuration
• Ensure you're using createWebHistory() (not createWebHashHistory())

Environment Variables Not Working

Problem: Environment variables are undefined

Solution:

1. Use correct prefix (VITE_ or VUE_APP_)
2. Redeploy after adding variables
3. Check variable names match exactly
4. Verify variables are set in correct environment

Slow Initial Load

Problem: Application takes too long to load

Solution:

1. Enable code splitting
2. Use lazy loading for routes
3. Optimize images
4. Remove unused dependencies
5. Enable tree shaking

Best Practices

Project Structure

my-vue-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── stores/
│   ├── App.vue
│   └── main.js
├── .env
├── .env.example
├── vite.config.js
├── package.json
└── README.md

Environment Variables

• Use .env.local for local development
• Never commit .env files
• Use correct prefix for your build tool
• Document required variables in README

Performance

• Enable code splitting
• Use lazy loading for routes
• Optimize images
• Minimize bundle size
• Use Vue's built-in optimizations

Security

• Never expose secrets in client code
• Validate all inputs
• Use HTTPS only
• Keep dependencies updated
• Use Content Security Policy

Advanced Configuration

Vite Configuration

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
  server: {
    port: 3000,
  },
});

Vue CLI Configuration

// vue.config.js
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
};

Custom Build Script

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "analyze": "vite-bundle-visualizer"
  }
}

Examples

Basic Vue App

<!-- src/App.vue -->
<template>
  <div>
    <h1>Vue on Deployxa</h1>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

With API Integration

<!-- src/App.vue -->
<template>
  <div>
    <h1>Data from API</h1>
    <pre>{{ data }}</pre>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const data = ref(null);

onMounted(async () => {
  const response = await fetch(import.meta.env.VITE_API_URL + '/data');
  data.value = await response.json();
});
</script>

With Routing

<!-- src/App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

Related Topics

• Deploy Nuxt
• Deploy React
• Environment Variables
• Custom Domains
• Monitoring

Resources

• Vue Documentation
• Vite Documentation
• Vue CLI
• Deployxa CLI
• API Reference
• Community Discord

---

Need Help? Contact support@deployxa.com or join our community Discord.