📦 pages-build-deployment-vue-spa

This repository provides two GitHub Actions to automate building and deploying a Vue Single Page Application (SPA) to GitHub Pages.

Available Actions

./build: Builds the Vue SPA.
./deploy: Deploys the built files to GitHub Pages.

Quick Usage

Add this workflow to .github/workflows/deploy.yml :

# This is a GitHub Actions workflow file for building and deploying a Vue SPA to GitHub Pages.
# It uses the adele25p/pages-build-deployment-vue-spa action to build the Vue SPA and deploy it to GitHub Pages.

name: 'Build and Deploy Vue SPA to GitHub Pages'

# On
# The workflow is triggered on push events to the main branch.
on:
  push:
    branches:
      - main

# Permissions
# The action requires permissions to read the contents of the repository, write to the pages and write the ID token (necessary for OIDC authentication used by GitHub Actions).
permissions:
  contents: read
  pages: write
  id-token: write

# Jobs
# The workflow consists of two jobs: build and deploy.
jobs:
  build:                           # Build the Vue SPA
    runs-on: ubuntu-latest
    steps:
      - name: Build
        uses: adele25p/pages-build-deployment-vue-spa/build@v1

  deploy:                          # Deploy the built Vue SPA to GitHub Pages
    runs-on: ubuntu-latest
    needs: build

    # The deployment is done to the GitHub Pages environment.
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy
        id: deployment
        uses: adele25p/pages-build-deployment-vue-spa/deploy@v1

Requirements

Make sure the following conditions are met before using the workflow:

• Your Vue Project is set up to build as a Single Page Application (SPA).
• If using Vue CLI, you have a valid vue.config.js file configured for SPA mode.
• If Vue Router uses history mode, a fallback is in place (e.g. a 404.html redirect), since GitHub Pages doesn't rewrite URLs server-side.
• Your repository has GitHub Pages enabled, with Source set to GitHub Actions.
• Your workflow grants contents: read, pages: write, and id-token: write permissions.

Customizing the Workflow

You can customize the build and deploy actions by passing inputs in the workflow file.
This allows you to adapt the workflow to different tools such as Vite, Vue CLI, Webpack, Nuxt (SPA) ...

Action Details

See build/README.md for build action documentation.
See deploy/README.md for deploy action documentation.

Useful Links

Resource	Description
GitHub Actions Documentation	Learn how GitHub Actions work and how to customise workflows.
GitHub Pages Documentation	Understand how to configure and use GitHub Pages.
Vue.js Deployment Guide	Official Vue documentation on deploying applications.
Vite Deployment Guide	Instructions for deploying Vite apps to static hosts.