Livewire Toastr?

Anyone able to use a Toastr in Livewire? I tried laravel-notify but it needs to be in a controller and doesn’t work in a Livewire component.

One way, you could create a livewire event listener in javascript to receive an event form livewire and fire toastr events.

1 Like

Thank you for that suggestion. I have unsuccessfully explored the documentation of incorporating javascript into livewire outside the use of Global Vue Components but I will renew my exploration and seek out other resources and tutorials.

Thats what i am doing with bootstrap notify

Javascript which is loaded in the layout

window.livewire.on('alert', data => {
    const type = data[0];
    const message = data[1];

    let icon = 'fa fa-check mr-1';
    switch (type) {
        case 'success':
            icon = 'fa fa-check mr-1';
            break;
        case 'info':
            icon = 'fa fa-info-circle mr-1';
            break;
        case 'warning':
            icon = 'fa fa-exclamation mr-1';
            break;
        case 'danger':
            icon = 'fa fa-times mr-1';
            break;
        default:
            icon = 'fa fa-info-circle mr-1';
            break;
    }
    One.helpers('notify', {
        type: type,
        icon: icon,
        message: message,
        align: 'center',
        allow_dismiss: false
    });
});

and then in my Livewire Component i can call something like this
$this->emit('alert', ['success', 'Record has been updated]);

3 Likes

This is brilliant!

One.helpers …

Where is the One instantiated???

In you javascript that gets compiled or loaded into the page, or you can push it to the stack in a component that exists on every page.

1 Like

You could basically replace the One.helpers… with your javascript that calls the notification

How funny! I do very similar thing!
$this->emit('alert', ['type' => 'success', 'message' => 'Agent has been changed.']);

window.livewire.on('alert', param => {
        toastr[param['type']](param['message']);
    });
11 Likes

That’s the perfect solution! :+1:


Here my solution

3 Likes

Livewire Toastr done by me

very nice and simple to use, thanks bro @WBDC :love_you_gesture:

Glad it helped! Welcome! :wink:

Thanks in advance, I found it as a best solution

@WBDC its working but the issue that i’m having is its firing multiple times, how do I make it to fire for the current event or activity only?