Laravel 11 Livewire Sweetalert Example

Websolutionstuff | May-29-2024 | Categories : Laravel Bootstrap

Hello, laravel web developers! In this article, we'll see how to add sweetalert in laravel 11 Livewire. In laravel 11 Livewire we'll implement a custom modal popup using sweetalert2. 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.

Laravel 11 Livewire Sweetalert

laravel 11 livewire sweetalert

 

Step 1: Install Laravel 11

In this step, we'll install laravel 11 using the following command.

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

 

 

Step 2: Install Livewire

Next, we'll 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 11 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: Define Route

Then, we'll define a route 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'll 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 11 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 Create Artisan Command in Laravel with Arguments Support?
How to Create Artisan Command...

Laravel is a comprehensive framework that provides an extensive range of artisan commands, enabling the automation of di...

Read More

Oct-06-2023

How to Create Trait in Laravel 10 Example
How to Create Trait in Laravel...

Hello developers! 👋 Today, let's dive into the wonderful world of Laravel 10 and explore one of its handy featu...

Read More

Feb-09-2024

How To Preview Image Before Upload In jQuery
How To Preview Image Before Up...

In this article, we will see how to preview an image before uploading it in jquery. You can use the JavaScript...

Read More

Jul-15-2022

How to Create Custom Error Page in Laravel 11
How to Create Custom Error Pag...

Hello developers! In this article, we'll see how to create a custom error page in laravel 11. Here, we'll custom...

Read More

May-08-2024