Vue3-toastify in Laravel/Inertia.js/Vue/Tailwind

_ToastNotifications.js

import { ref, watch } from 'vue'
import { usePage } from '@inertiajs/vue3'
import { toast } from 'vue3-toastify'

const toasts = ref()

const reToasted = ref(false)

function fireToast(notification, sticky = false) {
    toast(notification.message, {
        toastId: notification.id,
        type: notification.type,
        newestOnTop: true,
        theme: toast.THEME.COLORED,
        autoClose: !sticky && (notification.type == 'success' ? 5000 : false),
        closeOnClick: !sticky,
        onClose: () => (reToasted.value = false),
    })
}

function fireToasts(sticky = false) {
    toasts.value?.forEach((notification) => fireToast(notification, sticky))
}

function toastAgain() {
    reToasted.value ? toast.remove() : fireToasts(true)
    reToasted.value = !reToasted.value
}

watch(
    // NOTE: Since Inertia.js 1.0.1, usePage() may return null initially.
    () => usePage()?.props?.flash.toasts,
    (newToasts) => {
        reToasted.value = false
        toasts.value = newToasts
        fireToasts()
    }
)

export function useToasts() {
    return {
        toasts,
        toastAgain,
        reToasted,
    }
}

_ToastNotifications.vue

<script setup>
import { BellAlertIcon, BellSlashIcon } from '@heroicons/vue/24/outline'
import { useToasts } from '@/Composables/ToastNotifications'

const { toasts, toastAgain, reToasted } = useToasts()
</script>

<template>
    <div>
        <button
            v-if="toasts"
            class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 hover:bg-gray-800 hover:text-white dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
            :class="{ 'animate-pulse': !reToasted }"
            @click="toastAgain()"
        >
            <component :is="reToasted ? 'BellSlashIcon' : 'BellAlertIcon'" class="h-5 w-5" />
        </button>
    </div>
</template>

HandleInertiaRequests.php

<?php

namespace App\Http\Middleware;

use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => fn () => [
                'toasts'=> $request->session()->get('toasts'),
            ],
            // ...
        ]);
    }
}

helpers.php

<?php
if (! function_exists('toast')) {
    function toast(ToastType $type, string $message, ?RedirectResponse $response = null)
    {
        $toasts = session()->get('toasts', []);
        $toasts[] = [
            'id'      => Str::uuid(),
            'type'    => $type->value,
            'message' => $message,
        ];
        if ($response) {
            return  $response->with('toasts', $toasts);
        } else {
            session()->flash('toasts', $toasts);
        }
    }
}

if (! function_exists('toast_success')) {
    function toast_success(string $message)
    {
        return toast(ToastType::SUCCESS, $message);
    }
}

if (! function_exists('toast_warning')) {
    function toast_warning(string $message)
    {
        return toast(ToastType::WARNING, $message);
    }
}

if (! function_exists('toast_error')) {
    function toast_error(string $message)
    {
        return toast(ToastType::ERROR, $message);
    }
}

ToastType.php

<?php

namespace App\Enums;

/**
 * Enum for toast messages type
 */
enum ToastType: string
{
    case SUCCESS = 'success';
    case WARNING = 'warning';
    case ERROR = 'error';
}