Laravel Livewire | Sweetalert Example

composer create-project --prefer-dist laravel/laravel blog
composer require livewire/livewire
php artisan make:livewire notificationSweetAlert
app/Http/Livewire/NotificationSweetAlert.phpresources/views/livewire/notification-sweet-alert.blade.ph
<?phpnamespace App\Http\Livewire;use Livewire\Component;class NotificationSweetAlert extends Component{protected $listeners = ['remove'];/*** Write code on Method** @return response()*/public function render(){return view('livewire.notification-sweet-alert')->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 users 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 imaginary file!']);}/*** 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 users table soon.']);}}
<div><h1>Laravel Livewire Sweetalert Example - raviyatechnical</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>
<?phpuse Illuminate\Support\Facades\Route;
use App\Http\Livewire\NotificationSweetAlert;
Route::get('notification-sweetalert', NotificationSweetAlert::class);
<!DOCTYPE html><html><head><title>Laravel Livewire Example - raviyatechnical</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>
php artisan serve
localhost:8000/notification-sweetalert

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store