Laravel 8 Livewire Notification Tutorial with Example

Share this Article
Reading Time: 5 minutes
458 Views

Inside this article we will see How to work with Laravel 8 Livewire Notification. We will create alert messages using bootstrap concept.

Adding bootstrap alert messages into livewire laravel 8 tutorial, article will be very easy to learn and implement in your development.

Learn More –

Let’s get started.


Installation of Laravel Application

Laravel Installation can be done in two ways.

  • Laravel Installer
  • By using composer

Laravel Installer

To install Laravel via Laravel installer, we need to install it’s installer first. We need to make use of composer for that.

$ composer global require laravel/installer

This command will install laravel installer at system. This installation is at global scope, so you type command from any directory at terminal. To verify type the given command –

$ laravel

This command will open a command palette of Laravel Installer.

To create ad install laravel project in system,

$ laravel new blog

With the name of blog a laravel project will be created at your specified path.

By using composer

Alternatively, we can also install Laravel by Composer command create-project. If your system doesn’t has Composer Installed, Learn Composer Installation Steps. Here is the complete command to create a laravel project-

$ composer create-project --prefer-dist laravel/laravel blog

After following these steps we can install a Laravel application into system.

To start the development server of Laravel –

$ php artisan serve

This command outputs –

Starting Laravel development server: http://127.0.0.1:8000

Assuming laravel already installed at system.


Install Livewire to Application

Open project into terminal and run this command.

$ composer require livewire/livewire

It will install livewire to laravel setup.


Create Livewire Component

Back to terminal and run this command to create component files.

$ php artisan make:livewire notification

It will create –

CLASS: app/Http/Livewire/Notification.php
VIEW: resources/views/livewire/notification.blade.php

Open Notification.php and write this complete code into it.

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Notification extends Component
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.notification')->extends('message');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertSuccess()
    {
        $this->dispatchBrowserEvent(
            'alert',
            ['type' => 'success',  'message' => 'This is a success message']
        );
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertError()
    {
        $this->dispatchBrowserEvent(
            'alert',
            ['type' => 'error',  'message' => 'Something is Wrong!']
        );
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertInfo()
    {
        $this->dispatchBrowserEvent(
            'alert',
            ['type' => 'info',  'message' => 'This is an information message']
        );
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertWarning()
    {
        $this->dispatchBrowserEvent(
            'alert',
            ['type' => 'warning',  'message' => 'This is warning message']
        );
    }
}

Open notification.blade.php and write this code into it.

<div style="margin-top:30px;">
    <h3>Laravel 8 Livewire Notification Example</h3>
      
    <button type="button" wire:click="alertSuccess" class="btn btn-success">Show Success Alert</button>
    <button type="button" wire:click="alertError" class="btn btn-danger">Show Error Alert</button>
    <button type="button" wire:click="alertInfo" class="btn btn-info">Show Info Alert</button>
    <button type="button" wire:click="alertWarning" class="btn btn-warning">Show Warning Alert</button>
</div>
      

Now, we have set the livewire component and their logic.


Create Blade Layout File

Create a file message.blade.php inside /resources/views folder.

Open message.blade.php and write this code into it.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Livewire Example</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <!-- Bootstrap files -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    
    <!-- Toastr files -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
    
<div class="container">
    @yield('content')
</div>
    
</body>
  
@livewireScripts
  
<script>
window.addEventListener('alert', event => { 
             toastr[event.detail.type](event.detail.message, 
             event.detail.title ?? ''), toastr.options = {
                    "closeButton": true,
                    "progressBar": true,
                }
            });
</script>
  
</html>

Add Route

Open web.php file from /routes folder and add this route into it.

//...

use App\Http\Livewire\Notification;

Route::get('notification', Notification::class);

//...

Application Testing

Open project to terminal and type the command to start development server

$ php artisan serve

URL – http://127.0.0.1:8000/notification

When you click any of the alert button, it will run the associated event from Notification.php component file.

We hope this article helped you to learn Laravel 8 Livewire Notification Tutorial with Example in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Find More on Laravel 8 Articles here

Leave a Comment