Adding Notifications and Toast Messages in Livewire 3.0

January 10, 2025
3:09 pm
No Comments

Introduction

In the last blog , we explored creating multi-step forms in Livewire 3.0. Today, we’ll focus on implementing notifications and toast messages in Livewire 3.0. Notifications and toast messages are essential for providing real-time feedback to users, ensuring they stay informed about actions like form submissions, errors, or updates.

Step 1: What Are Notifications and Toast Messages?

Notifications: Persistent or temporary messages displayed on the screen to inform users about the status of an action.
Toast Messages: Small, non-intrusive alerts that appear briefly and disappear automatically, often used for success or error messages.

Step 2: Setting Up Notifications in Livewire

1. Using Dispatch Events

Livewire 3.0 allows you to dispatch events for triggering notifications. Let’s set up a simple notification system.

Example: Dispatching Notifications

Add a method to your Livewire component:

				
					public function triggerNotification()
{
    $this->dispatch('notify', [
        'type' => 'success',
        'message' => 'Your action was successful!'
    ]);
}

In the Blade template:

				
					<button wire:click="triggerNotification">Trigger Notification</button>

<script>
    document.addEventListener('notify', event => {
        alert(`${event.detail.type.toUpperCase()}: ${event.detail.message}`);
    });
</script>

How It Works:

The dispatch method emits a notify event with the type and message.
The JavaScript notify listener displays the message using alert.

Step 3: Adding Toast Messages

1. Using a Toast Library

For better styling and animations, integrate a toast library like Toastify.

Install Toastify using npm

				
					npm install toastify-js

Include the library in your main Blade layout:

				
					<link rel="stylesheet" href="/node_modules/toastify-js/src/toastify.css">
<script src="/node_modules/toastify-js/src/toastify.js"></script>

2. Triggering Toast Messages

Update your Blade template:

				
					<script>
    document.addEventListener('notify', event => {
        Toastify({
            text: event.detail.message,
            duration: 3000,
            gravity: "top",
            position: "right",
            backgroundColor: event.detail.type === 'success' ? "green" : "red",
        }).showToast();
    });
</script>

Step 4: Creating a Reusable Notification Component

1. Generate the Component

Run the following command:

				
					php artisan make:livewire Notification

2. Define the Component Logic

Update Notification.php:

				
					<?php

namespace App\Livewire;

use Livewire\Component;

class Notification extends Component
{
    public $message;
    public $type;
    public $isVisible = false;

    protected $listeners = ['showNotification'];

    public function showNotification($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
        $this->isVisible = true;

        $this->dispatch('notify', [
            'type' => $type,
            'message' => $message
        ]);

        // Auto-hide after 3 seconds
        $this->dispatch('hideNotification', delay: 3000);
    }

    public function hideNotification()
    {
        $this->isVisible = false;
    }

    public function render()
    {
        return view('livewire.notification');
    }
}

3. Create the Blade View

In notification.blade.php:

				
					<div>
    @if ($isVisible)
        <div class="notification {{ $type }}">
            {{ $message }}
        </div>
    @endif
</div>

<style>
    .notification {
        position: fixed;
        top: 10px;
        right: 10px;
        padding: 10px 20px;
        color: white;
        border-radius: 5px;
    }
    .success {
        background-color: green;
    }
    .error {
        background-color: red;
    }
</style>

Step 5: Using the Notification Component

You can use the Notification component globally:

Include it in your layout:

				
					<livewire:notification />

Trigger notifications from any Livewire component:

				
					$this->dispatch('showNotification', 'success', 'Action completed successfully!');

Final Output

By following these steps, you can:

Provide instant feedback to users with notifications.
Use toast messages for non-intrusive alerts.
Build reusable components for notifications across your application.

Key Features Covered Today

Dispatching events for notifications in Livewire 3.0.
Adding styled toast messages with libraries like Toastify.
Building a reusable notification component.
Managing notifications dynamically in Livewire.