Notyf Toast Notification using Livewire

New Livewire

Demo

This is a pro component. Get Livewiredemos pro access to view / download the component code.

Code


         <script src="https://kit.fontawesome.com/057fec968e.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
    <script>
        var notyf = new Notyf();
        Livewire.on('successAlert', alertMessage => {
            notyf.success(alertMessage);
        });
        Livewire.on('errorAlert', alertMessage => {
            notyf.error(alertMessage);
        });
    </script>

Usage

We are listening for the livewire events in the javascript. All you have to do is emit the success or error alert messsage 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 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.