Alpine Toast - Bootstrap

toast.blade.php

<div aria-live="polite" aria-atomic="true" x-data="{
        toasts: [],
        remove(id) {
            {{-- this.toasts.splice(this.toasts.indexOf(toast), 1) --}}
            this.toasts = this.toasts.filter(t => t.id !== id)
        },
        listen() {
            let toast = event.detail;
            let toast_id = (Math.random() + 1).toString(36).substring(7);
            this.toasts.push({
                id: toast_id,
                type: toast.type,
                message: toast.message,
                title: toast.title,
            });

            setTimeout(() => { this.remove(toast_id) }, 2500)
        },
    }"

    class="position-absolute end-0 align-items-end justify-content-center px-2 py-3 position-relative"
    x-on:toast.window="listen()"
>
    <div class="toast-container p-3">
        <template x-for="(toast, toastIndex) in toasts" :key="toast.id">
            <div
                {{-- x-transition:enter="transform ease-out duration-300 transition"
                x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
                x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
                x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0" --}}
                class="toast fade show z-1 position-relative"
                :class="{
                    'bg-success text-white': toast.type === 'success',
                    'bg-danger text-white': toast.type === 'error',
                    'bg-danger text-white': toast.type === 'danger',
                    'bg-info text-white': toast.type === 'info',
                    'bg-warning text-white': toast.type === 'warning',
                }"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
            >
                <template x-if="toast.title">
                    <div>
                        <div class="toast-header d-flex justify-content-between">
                            <div x-html="toast.title"></div>
                            <button type="button" @click="remove(toast.id)" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                        </div>
                        <div class="toast-body" x-html="toast.message"></div>
                    </div>
                </template>
                <template x-if="!toast.title">
                    <div class="toast-body d-flex justify-content-between">
                        <div x-html="toast.message"></div>
                        <button type="button" @click="remove(toast.id)" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </template>
            </div>
        </template>
    </div>
</div>