Github Actions

  1. Mkdir .github/workflows in repo
  2. Create below secrets in Repo Settings
    AWS_ACCESS_KEY_ID
    AWS_SECRET_ACCESS_KEY
    AWS_REGION
    BUCKET_NAME
  3. Below is sample workflow for vue project. Add it in .github/workflows/buid-and-deploy-to-s3.yml
name: build-and-deploy-to-s3
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy-to-s3:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Git Repo
        uses: actions/checkout@v4

      - name: Install Node
        uses: actions/setup-node@v4

      - name: Install Dependencies
        run: npm install

      - name: Build Website
        run: npm run build

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Delete js assets
        run: rm -rf ./dist/js

      - name: Deploy static site to S3 bucket
        run: aws s3 sync ./dist/ s3://${{ secrets.BUCKET_NAME }} --delete --no-progress

Vue Lifecycle Hooks

Navigation Guard in Vue 

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
    next("/login'):
  } else if (to.meta.requiresUnauth && store.getters.isAuthenticated) {
    next("/home");
  } else {
    next():
  }
});

Embed Vue in Html 

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/axios@latest"></script>

<div id="app">
  {{ message }}
</div>

<script>
App = {
  data() {
    return {
        message: "Hello world!"
    }
  }
}

Vue.createApp(App).mount('#app');
</script>