How to use toast library in laravel/ livewire app?

61 Views Asked by At

In laravel 10 livewire 3 app I try to use toast library to show

$this->dispatch('PersonalPageMessageSuccess', [
    'title' => 'Tasks for News',
    'message' => 'News task was created !',
]);

In resources/views/livewire/personal/page-header.blade.php file :

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<div>
    <script>

        window.addEventListener('PersonalPageMessageSuccess', event => {
            console.log('PersonalPageMessageSuccess event::')
            console.log(event)

            popupAlert(event.detail.title, event.detail.message, 'success')
            event.stopPropagation();
            return false;
        })

            ...

        function popupAlert(title, text, textType) {
            if (typeof textType == "undefined") {
                textType = "info"
            }

            toastr.options = {
                closeButton: true,
                debug: false,
                progressBar: false,
                positionClass: 'toast-top-right',
                onclick: null,
                showEasing: 'swing',
                hideEasing: 'linear',
                closeDuration: 44000,
                closeEasing: 'linear'
            };
            console.log(textType)
            console.log(toastr)
            toastr['success'](text);

But I got error :

toastr.js:474 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')

and printscreen :

enter image description here

Which is the valid way to use toast library in my app ?

0

There are 0 best solutions below