Notyf Toast Notification using Livewire

Usage

We are listening for the livewire events in the javascript. All you have to do is emit the success or error alert message from Livewire

//Emit event from template
<button wire:click="$emit('successAlert', 'This is a success message')">
<button wire:click="$emit('errorAlert', 'This is a error message')">

//Emit event from component
$this->emit('successAlert', 'This is a success message');
$this->emit('errorAlert', 'This is a error message');

Documentation

Notyf is a lightweight javascript toast notification plugin. Using notyf with Livewire is simple since with Livewire you can emit events and listen to them in javascript.

Implementation is simple we listen for the livewire events in the global javascript and when we catch the event we send the notfy toast notification.