adrema/resources/js/components/Notification.vue

<template>
    <div class="grid gap-2 has-contents">
        <transition-group name="fadeRight" tag="div">
            <div v-for="(item, index) in items" :key="'i'+index"
                 :class="`${colors[item.type].bg} ${colors[item.type].text} h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`"
            >
                <div class="text-sm" v-for="message in item.messages" v-text="message"></div>
            </div>
        </transition-group>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            colors: {
                red: {
                    bg: 'bg-red-300',
                    text: 'text-red-800'
                },
                green: {
                    bg: 'bg-green-300',
                    text: 'text-green-800'
                }
            }
        };
    },
    computed: {
        items() {
            var i = [];

            for (const field in this.$page.props.errors) {
                i.push({ messages: this.$page.props.errors[field], type: 'red' });
            }

            if (this.$page.props.flash && this.$page.props.flash.success) {
                i.push({ messages: [ this.$page.props.flash.success ], type: 'green' });
            }

            return i;

            return this.$page.props.errors;
        }
    }
};
</script>