Turn Laravel Livewire Component into Modal.
- Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )
- Skeleton loading indicator
- Support alert message ( info, warning, success, danger )
- Trigger from Alpine Component / Vanilla JS / Livewire Class Component
| Bootstrap | 4 or 5 | no bootstrap support coming soon |
|---|---|---|
| Jquery | for bootstrap 4 only | |
| Laravel | >= 7 | |
| Livewire | >= 2.0 | |
| Alpine JS |
composer require devsrv/livewire-modal<html>
<head>
...
@livewireStyles
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
...
<x-livewiremodal-base /> 👈
@livewireScripts
</body>
</html>php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=publicphp artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=configconfig support bootstrap theme: bs4 | bs5
Important: when updating the package make sure to re-publish the assets with
--forceflag
php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public --forceNo consideration required, create livewire component as usual. Use livewire's mount to handle passed parameters
<div x-data>
<button type="button" x-on:click='$dispatch("open-x-modal", {
title: "Heading Title",
modal: "livewire-component-name",
size: "xl",
args: {{ json_encode($data_array) }}
})'>open
</button>
</div><button type="button" onclick='_openModal("Heading", "component-name", {{ json_encode($data) }}, "sm")'>
open
</button><x-livewiremodal-trigger class="btn"
title="Modal Heading"
modal="component-name"
:args="['sky' => 'blue', 'moon' => 1]"
lg>open
</x-livewiremodal-trigger>$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);💡 Modal size supports
smlgxl// completely optional
you are free to put content in livewire view file in any structure, however the package provides an blade component for bootstrap modal which you can use as:
<x-livewiremodal-modal>
<div class="row">
...
</div>
...
<x-slot name="footer">
...
<button type="button" class="..">Save</button>
</x-slot>
</x-livewiremodal-modal>🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes
🟢 alert notification message which can be triggered by:
$this->info('<strong>Hi !</strong>, i am an alert'); // support `info` `warning` `success` `danger`Please see CHANGELOG for more information on what has changed recently.
The MIT License (MIT). Please see License File for more information.
Leave a ⭐ if you find this package useful 👍🏼, don't forget to let me know in Twitter