Stack Messages

[r2luna]

A little contribution to your example. (that was awesome btw).

<template>
    <div class="fixed top-0 right-0 m-6 z-10">
        <transition-group name="slide-fade">
            <div
                v-for="(message, index) in messages" :key="`flash-messages-${index}`"
                :class="{
          'bg-red-200 text-red-900': message.type === 'error',
          'bg-green-200 text-green-900': message.type === 'success',
          'bg-blue-200 text-blue-900': message.type === 'info',
          'bg-orange-200 text-orange-900': message.type === 'warning'
        }"
                class="rounded-lg shadow-md px-6 py-4 pr-10 relative mb-4"
                style="min-width: 240px"
            >
                <button
                    class="opacity-75 cursor-pointer absolute top-0 right-0 py-2 px-3 hover:opacity-100"
                    @click="closeMessage(index)"
                >
                    &times;
                </button>
                <div class="flex items-center text-lg">
                    {{ message.text }}
                </div>
            </div>
        </transition-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                messages: [],
            };
        },
        mounted() {
            Bus.$on('flash-message', message => {
                let msg = {
                    text: null,
                    type: 'success',
                };

                typeof message === 'object' ? msg = message : msg.text = message;

                this.messages.push(msg);

                setTimeout(() => {
                    this.messages.shift();
                }, 5000);
            });
        },
        methods: {
            closeMessage(index) {
                this.messages.splice(index, 1);
            }
        }
    };
</script>

<style scoped>
    .slide-fade-enter-active,
    .slide-fade-leave-active {
        transition: all 0.4s;
    }

    .slide-fade-enter,
    .slide-fade-leave-to {
        transform: translateX(400px);
        opacity: 0;
    }
</style>