Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps

Introduction

In today's fast-paced software development landscape, Continuous Integration and Continuous Deployment (CI/CD) have become essential for maintaining code quality, reducing manual errors, and accelerating delivery cycles.

By automating build, test, and deployment processes, development teams can focus more on creating innovative features and less on repetitive infrastructure tasks.

This guide will walk you through a comprehensive and straightforward approach to configuring GitHub Actions for Vue and Vite applications and using GitHub Pages for deployment, providing you with a clear and practical roadmap to implement CI/CD pipelines from scratch.

Creating a Fresh Vite/Vue Application

let's create a new vue application, you can use any vite template, we use create vue to have access to predefined unit test configuration.

npm create vue@latest

And here are the options we'll use:

You can configure your Vue application as you prefer, but for this guide, we'll use only Vitest for Unit Tests and the End-to-End testing option is set to No.

Configuring Vite Settings for Deployment

Now we need to set base property in vite.config.ts file.

If you are deploying to https://<USERNAME>.github.io/ (your github home page), or to a custom domain, you don't need this option and simply remove it.

But if you are deploying to https://<USERNAME>.github.io/<REPO>/ then set base to '/<REPO>/'.
more

We are deploying to our repo URL,
So our vite.config.ts file looks like this:

export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools()],
  base: '/vue-github-action/', // [!code focus]
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

Verifying Build and Test Commands

Run the build and test commands locally to check everything works correctly:

npm run build

npm run test:unit

Now if you get no error, commit all the changes and move to the next step.

Create Github Repo (Optional)

Now create a new Github repository (if you don't created yet) and push all the changes to it

Then push all the changes to your repo.

git push -u origin main

Setting Up GitHub Pages

Go to your Github Repository Settings

Navigate to Pages on the sidebar, under the Build and deployment section, change the source to Github Actions.

It should change to this

Now you are ready to add GitHub CI/CD workflow.

Add GitHub Action Workflow

This is the last step and after committing and pushing the changes, you'll see your app on GitHub pages.

At the root of your project, create ci-cd.yml file in the .github/workflows/ directory and add the following:

Note: name of the workflow can be anything, we just simply go with ci-cd.yml.

name: Test and Deploy static content to Pages

on:
  push:
    branches: ['main']

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  lint-and-test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22.12.0'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Lint Code
        run: npm run lint

      - name: Type Check
        run: npm run type-check

      - name: Run Unit Tests
        run: npm run test:unit

  deploy:
    needs: lint-and-test
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

commit and push the workflow to you github repo and Check your workflow result in Repository > Actions tab.

If you see the Green color, that means you did it!

Now check you github pages https://<USERNAME>.github.io/<REPO>/

So for me, it will be https://biomousavi.github.io/vue-github-action/

Note: If you get error on installing packages, you need to have package-lock.json in your project, because we use npm ci that looks for package-lock.json file.

Conclusion

GitHub Actions can make your Vue.js development workflow smoother. Automate, deploy, and focus on what matters most: writing great code.

If you found this guide helpful ❤️ and saved you time in setting up CI/CD for your Vue.js project, I'd be incredibly grateful if you could show some support by giving the repository a ⭐ star on GitHub!