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

1 Like

Livewire Toastr done by me

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

1 Like

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?

I think you listening those messages globally and also in your single blade.
E.g. listening for status messages in your main.blade.php and you also listen the message in your xyz.blade.php.

@WBDC I only added this :
window.livewire.on(‘alert’, param => {
toastrparam[‘type’];
});
to the main.blade file but it fires many times on the component , i’m a little confused now

Hi, i use this livewire package really easy

https://github.com/jantinnerezo/livewire-alert

From the component example, no a single JS line of code.
// Success event
$this->alert(‘success’, ‘You are successful!’, [
‘position’ => ‘center’,
‘timer’ => 15000,
‘toast’ => false,
‘text’ => ‘I am a subtext’,
‘showCancelButton’ => false,
‘showConfirmButton’ => false
]);

1 Like

https://github.com/jantinnerezo/livewire-alert
i stopped using this package cause it was causing an issue with Jetstream, don’t know if still happens but in case you have a problem with Jetstream, look into this package.