🤹
🤹
🤹
🤹
TALL Stack Tips
Search…
🤹
🤹
🤹
🤹
TALL Stack Tips
What is TALL Stack
Tailwind
Tailwind Resources
Swinging Bell Notification Icon
Alpine
Alpine Resources
Tabbed Content Using Alpine JS
Checkbox component with SVG tick
Dropdown animation
Laravel
Tabler Icons Component
Password-less Login with Laravel 8
Password-less Login with Magic Link in Laravel 8
Laravel Resources
Laravel 8 Conditional Login Redirect
Simplify Laravel CRUD Controllers
CSRF and expired login forms
CSRF and expired logout forms
Specify a different mail theme for Notifications
Using a mutator to save currency
Using Spatie Valuestore to hold frequently accessed settings
Using the old() helper
Alternatives to using Eloquent Accessor
UpdateOrCreate may not update timestamp
Use of lockForUpdate()
Using S3
Super Simple User Based Feature Flags
Installing a Specific Version of Laravel
Versioning your Laravel Project
CSS Cache Busting with your Git Commit SHA
Adding column to Database Notifications table
Find nearby locations using the Haversine formula in Eloquent query
Using Queues on Shared Hosting with Laravel
PHP DateTime formatting cribsheet
Livewire
Livewire Resources
Naming Livewire Components
Dynamic Cascading Dropdown with Livewire
Hiding a button after click
Working with Javascript Components
SweetAlert2 with Livewire
Clearing checkboxes in Livewire
Livewire File Uploads Using S3
Simple Log File Viewer
Related Resources
Testing resources
When Composer runs out of memory
Deployment
Security
Scheduler & Cron tips
LastPass tips
Using Git
VSCode Tips
Markdown
Cpanel resources
Powered By
GitBook
SweetAlert2 with Livewire
Use SweetAlert2 to display animated popup alert following Livewire action
Install SweetAlert in master layout
On views that expect to use SweetAlert, or in master layout file, add a listener
1
window
.
addEventListener
(
'swal'
,
function
(
e
){
2
Swal
.
fire
(
e
.
detail
);
3
});
Copied!
Then trigger an event from Livewire component when you want to show the popup
1
$this
->
dispatchBrowserEvent
(
'swal'
,
[
'title'
=>
'Feedback Saved'
]);
Copied!
Pass any SweetAlert config elements to style your popup
1
$this
->
dispatchBrowserEvent
(
'swal'
,
[
2
'title'
=>
'Feedback Saved'
,
3
'timer'
=>
3000
,
4
'icon'
=>
'success'
,
5
'toast'
=>
true
,
6
'position'
=>
'top-right'
7
]);
Copied!
SweetAlert2
You might instead use this package;
GitHub - jantinnerezo/livewire-alert: SweetAlert2 wrapper for Livewire
GitHub
​
Livewire - Previous
Working with Javascript Components
Next - Livewire
Clearing checkboxes in Livewire
Last modified
1yr ago
Copy link