show better job state and add some filters #9

	name: Build and Deploy Vue.js App

	on:
	push:
	branches:
	- main # Set to the branch name you use for releases
	tags: ['v..*']
	pull_request:
	branches:
	- main

	env:
	# Use docker.io for Docker Hub if empty
	REGISTRY: ghcr.io
	# github.repository as <account>/<repo>
	IMAGE_NAME: ${{ github.repository }}

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

	- name: Set up Node.js
	uses: actions/setup-node@v4
	with:
	node-version: '22' # Set this to the node version you use

	- name: Install dependencies
	run: npm install

	- name: Build Vue.js project
	run: npm run build

	- name: Upload dist directory to workspace
	uses: actions/upload-artifact@v4
	with:
	name: dist
	path: dist/

	build_and_push_docker:
	needs: build_vue
	runs-on: ubuntu-latest
	steps:
	- name: Checkout code
	uses: actions/checkout@v4

	- name: Download dist directory
	uses: actions/download-artifact@v4
	with:
	name: dist
	path: dist

	- name: Log in to GitHub Container Registry
	uses: docker/login-action@v3
	with:
	registry: ${{ env.REGISTRY }}
	username: ${{ github.actor }}
	password: ${{ secrets.GITHUB_TOKEN }}

	- name: Extract Docker metadata
	id: meta
	uses: docker/metadata-action@v5
	with:
	images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}


	- name: Build and push Docker image
	uses: docker/build-push-action@v6
	with:
	context: .
	file: ./Dockerfile
	push: ${{ github.event_name != 'pull_request' }}
	tags: ${{ steps.meta.outputs.tags }}
	labels: ${{ steps.meta.outputs.labels }}

Provide feedback