Deploy Vue on Netlify with GitHub Actions

💚 Vue 🌐 Netlify Platform ⚙️ GitHub Actions

Configuration Files

Production-ready configuration files with detailed comments and best practices. Each file works together as a complete deployment solution.
name: Deploy to Netlify

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: './dist'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: true
          enable-commit-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Prerequisites

  • Netlify account (free tier)
  • GitHub repository
  • Node.js 18+
  • Vue 3 project with Vite
  • Netlify site created

Deployment Steps

  • Create Vue app: npm create vue@latest
  • Create Netlify site in dashboard
  • Get Site ID from Site settings
  • Generate Personal Access Token in User settings
  • Add GitHub Secrets: NETLIFY_AUTH_TOKEN, NETLIFY_SITE_ID
  • Create netlify.toml in project root
  • Create .github/workflows/deploy.yml
  • Push to main to deploy
  • PRs get deploy previews automatically

Additional Notes

  • ⚡ Instant cache invalidation
  • 🌍 Global CDN with edge nodes
  • 🔄 Deploy previews for every PR
  • 💰 Free tier: 100GB bandwidth, 300 build minutes
  • 📦 Automatic asset optimization
  • 🚀 Serverless functions included
  • 🔒 Free SSL certificates
  • 📊 Built-in analytics available
  • ⚠️ SPA routing requires redirects in netlify.toml