How to Deploy a Vue.js App to GitHub Pages

So, you’ve built an amazing Vue.js application, and now you want to share it with the world. The good news? You don’t need a complex hosting solution—GitHub Pages can do the job for free! Deploying a Vue app to GitHub Pages might seem tricky at first, but don’t worry—I’ll guide you through each step in a simple and easy-to-follow way. (Deploy Vue.js App to GitHub Pages)

By the end of this guide, you’ll have your Vue.js project live on GitHub Pages, accessible to anyone with an internet connection. Let’s dive in!

Step 1: Set Up Your Vue.js Project

Before deploying, ensure that your Vue.js project is ready. If you haven’t created a Vue app yet, you can set up one using Vue CLI:

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

Once your Vue.js app is ready and tested locally, move on to the next step.

Step 2: Configure Vue for GitHub Pages

GitHub Pages serves content from a repository’s gh-pages branch. To ensure your Vue.js app works correctly, modify the vue.config.js file in your project root. If it doesn’t exist, create it and add the following code:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-repo-name/' : '/'
};

Replace your-repo-name with the actual name of your GitHub repository.

Step 3: Install the GitHub Pages Deployment Package

Vue apps need to be built before deployment. Install the gh-pages package to simplify the process:

npm install gh-pages --save-dev

This package helps automate deployment to GitHub Pages.

Step 4: Update the Package.json File

Modify your package.json file by adding the following homepage property and scripts:

"homepage": "https://your-username.github.io/your-repo-name",
"scripts": {
  "build": "vue-cli-service build",
  "deploy": "npm run build && gh-pages -d dist"
}

Again, replace your-username with your GitHub username and your-repo-name with your actual repository name.

Step 5: Build and Deploy Your Vue App

Now, it’s time to build and deploy your application:

npm run deploy

This command will:

1. Build your Vue.js app
2. Push the dist folder to the gh-pages branch
3. Make your app live on GitHub Pages

Step 6: Enable GitHub Pages

1. Go to your GitHub repository.
2. Click on Settings > Pages.
3. Under the Branch section, select gh-pages.
4. Click Save.

Your Vue.js app should now be live at https://your-username.github.io/your-repo-name/.

With just a few configurations and commands, your app is up and running. If you’re looking for professional website development services, consider CodeHunger—a reliable name in web development. Happy coding!