marcincook / laravel-livewire-modals
Dynamic Laravel Livewire Bootstrap modals.
Requires
- laravel/framework: ^9.0|10.0
- livewire/livewire: ^2.0
README
This package allows you to dynamically show your Laravel Livewire components inside Bootstrap modals.
Documentation
Requirements
- Bootstrap 5 must be installed via webpack first
Installation
Require the package:
composer require marcincook/laravel-livewire-modals
Add the livewire:modals
component to your app layout view:
<livewire:modals/> <livewire:scripts/> <script src="{{ asset('js/app.js') }}"></script>
Require ../../vendor/marcincook/laravel-livewire-modals/resources/js/modals
in your app javascript file:
require('@popperjs/core'); require('bootstrap'); require('../../vendor/marcincook/laravel-livewire-modals/resources/js/modals');
Usage
Modal Views
Make a Livewire component you want to show as a modal. The view for this component must use the Bootstrap modal-dialog
container:
<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div>
Showing Modals
Show a modal by emitting the showModal
event with the component alias:
<button type="button" wire:click="$emit('showModal', 'auth.profile-update')"> {{ __('Update Profile') }} </button>
Mount Parameters
Pass parameters to the component mount
method after the alias:
<button type="button" wire:click="$emit('showModal', 'users.update', '{{ $user->id }}')"> {{ __('Update User #' . $user->id) }} </button>
The component mount
method for the example above would look like this:
namespace App\Http\Livewire\Users; use App\Models\User; use Livewire\Component; class Update extends Component { public $user; public function mount(User $user) { $this->user = $user; } public function render() { return view('users.update'); } }
Hiding Modals
Hide the currently open modal by emitting the hideModal
event:
<button type="button" wire:click="$emit('hideModal')"> {{ __('Close') }} </button>
Or by using the Bootstrap data-bs-dismiss
attribute:
<button type="button" data-bs-dismiss="modal"> {{ __('Close') }} </button>
Emitting Events
You can emit events inside your views:
<button type="button" wire:click="$emit('hideModal')"> {{ __('Close') }} </button>
Or inside your components, just like any normal Livewire event:
public function save() { $this->validate(); // save the record $this->emit('hideModal'); }
Publishing Assets
Custom View
Use your own modals view by publishing the package view:
php artisan vendor:publish --tag=laravel-livewire-modals:views
Now edit the view file inside resources/views/vendor/laravel-livewire-modals
. The package will use this view to render the component.