How to Deploy a Vue.js Application: A Step-by-Step Guide

So, you’ve built an amazing Vue.js application, and now it’s time to share it with the world! Deploying a Vue.js app(Deploy Vue.js application) might seem overwhelming at first, but don’t worry—this guide will walk you through the process in a simple, easy-to-follow manner. Whether you’re deploying to Netlify, Vercel, GitHub Pages, or a traditional server, we’ve got you covered.

Step 1: Build Your Vue.js Application

Before deploying, you need to create a production-ready build of your Vue.js app.

Open your terminal in the project folder and run:

npm run build

This will generate a dist folder containing the optimized files for deployment.

Step 2: Choose Your Deployment Method

Deploying on Netlify (Easy & Free)

Netlify is one of the best platforms for hosting Vue.js applications. Here’s how you can deploy your app:

1. Create an account on Netlify.
2. Click on “New Site from Git” and connect your GitHub, GitLab, or Bitbucket repository.
3. Select the repository containing your Vue.js app.
4. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
5. Click Deploy and wait for Netlify to publish your site.

Deploying on Vercel (Fast & Efficient)

Vercel is another great option for hosting Vue.js applications.

1. Sign up at Vercel.
2. Click “New Project” and connect your GitHub repository.
3. Select your Vue.js project and configure the build settings:
   • Build command: npm run build
   • Output directory: dist
4. Click Deploy and within seconds, your site will be live!

Deploying on GitHub Pages (For Static Sites)

GitHub Pages is a free option for deploying simple Vue.js apps.

1. Install the Vue CLI plugin for GitHub Pages:

npm install -g gh-pages

2. Add the following to package.json:

"scripts": {
  "deploy": "vue-cli-service build && gh-pages -d dist"
}

3. Run:

npm run deploy

4. Your Vue.js app will be deployed on https://your-username.github.io/repository-name/.

Deploying on a Traditional Web Server (Apache/Nginx)

For deploying to a traditional web server, follow these steps:

1. Run npm run build to generate the dist folder.
2. Upload the contents of the dist folder to your server using FTP or SSH.
3. Configure your server to serve the index.html file from the dist folder.

1. For Apache, update the .htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

2. For Nginx, update the configuration:

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/your-vue-app/dist;
    index index.html;
    location / {
        try_files $uri /index.html;
    }
}

Deploying a Vue.js app is easier than you think! Whether you prefer Netlify, Vercel, GitHub Pages, or a traditional server, you have multiple options to get your project live in no time. If you’re looking for professional website development services, CodeHunger can help bring your ideas to life.

Happy coding! 🚀