Laravel 9 Livewire Sweetalert Example

Websolutionstuff | Nov-25-2022 | Categories : Laravel jQuery Bootstrap

In this article, we will see the laravel 9 livewire sweet alert example. Here we will learn how to use sweetalert in laravel 9 with livewire. sweetalert2 is used to create different types of custom alert messages. You can create custom popups like success messages, error messages, warning modals, confirm modals, custom notifications, etc.

Javascript provides a simple alert box in your browser but if you want to display a custom popup then a sweet alert is a very effective library that allows us to create all kinds of alert messages. The sweet alert is a responsive, beautiful, customizable, and zero-dependent javascript plugin.

So, let's see sweetalert in laravel 7, laravel 8, and laravel 9 and how to use sweetalert2 in laravel 9 using livewire.

Step 1: Install Laravel 9

In this step, we will install laravel 9 using the following command.

composer create-project --prefer-dist laravel/laravel sweetalert_example

 

 

Step 2: Install Livewire

In this step, we will install laravel livewire using the following composer command.

composer require livewire/livewire

 

Step 3: Create Component

Now, we will create a livewire notification component for sweet alert notifications.

php artisan make:livewire sweetAlertNotification

 

app/Http/Livewire/sweetAlertNotification.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
  
class sweetAlertNotification extends Component
{
  
    protected $listeners = ['remove'];
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.sweet-alert-notification')->extends('layouts.app');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertSuccess()
    {
        $this->dispatchBrowserEvent('swal:modal', [
                'type' => 'success',  
                'message' => 'User Created Successfully!', 
                'text' => 'It will list on the user's table soon.'
            ]);
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertConfirm()
    {
        $this->dispatchBrowserEvent('swal:confirm', [
                'type' => 'warning',  
                'message' => 'Are you sure?', 
                'text' => 'If deleted, you will not be able to recover this item!'
            ]);
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function remove()
    {
        /* Write Delete Logic */
        $this->dispatchBrowserEvent('swal:modal', [
                'type' => 'success',  
                'message' => 'User Delete Successfully!', 
                'text' => 'It will not list on the user's table soon.'
            ]);
    }
}

 

resources/views/livewire/sweet-alert-notification.blade.php

<div>
    <h1>Laravel 9 Livewire Sweetalert Example - Websolutionstuff</h1>
   
    <button type="button" wire:click="alertSuccess" class="btn btn-success">Success Alert</button>
    <button type="button" wire:click="alertConfirm" class="btn btn-danger">Confirm Box</button>
</div>

 

 

Step 4: Create Route

In this step, we will add routes to the web.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\SweetAlertNotification;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('sweetalert-notification', SweetAlertNotification::class);

 

Step 5: Create View File

In this step, we will create a blade file and include @livewireStyles, and @livewireScripts.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>how to use sweetalert in laravel 9 using livewire - Websolutionstuff</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <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>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
    
<div class="container">
    @yield('content')
</div>
    
</body>
  
@livewireScripts
  
<script>
  
window.addEventListener('swal:modal', event => { 
    swal({
      title: event.detail.message,
      text: event.detail.text,
      icon: event.detail.type,
    });
});
  
window.addEventListener('swal:confirm', event => { 
    swal({
      title: event.detail.message,
      text: event.detail.text,
      icon: event.detail.type,
      buttons: true,
      dangerMode: true,
    })
    .then((willDelete) => {
      if (willDelete) {
        window.livewire.emit('remove');
      }
    });
});
 </script>
  
</html>

 


You might also like:

Recommended Post
Featured Post
How To Add Toastr Notification In Laravel
How To Add Toastr Notification...

In this tutorial, I will show you how to add toastr notification in laravel application. There are many types of no...

Read More

May-29-2020

How To Install Bootstrap In React JS
How To Install Bootstrap In Re...

In this article, we will see how to install bootstrap in react js. Also, we will see how to use bootstrap in react...

Read More

Sep-08-2022

The Mix Manifest Does Not Exist Laravel
The Mix Manifest Does Not Exis...

In this article, we will see the mix manifest does not exist in laravel 8 and laravel 9. We will solve the mix...

Read More

Oct-28-2022

Laravel 9 Livewire Dependent Dropdown
Laravel 9 Livewire Dependent D...

In this article, we will see the laravel 9 livewire dependent dropdown. Here, we will learn how to create a dependent dr...

Read More

Nov-29-2022