tethys.backend/resources/js/Components/FormValidationErrors.vue

<script setup>
import { computed, defineProps } from 'vue';
import { usePage } from '@inertiajs/vue3';
import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';

// const errors = computed(() => usePage().props.errors);
// const hasErrors = computed(() => Object.keys(props.errors.value).length > 0);

const props = defineProps({
    errors: Object,
});
const hasErrors = computed(() => {
    return props.errors != null && Object.keys(props.errors).length > 0;
});
</script>

<template>
    <NotificationBarInCard v-if="hasErrors" color="danger">
        <b>Whoops! Something went wrong.</b>
        <span v-for="(error, key) in errors" :key="key">{{ error }}</span>
    </NotificationBarInCard>
</template>