Laravel 11 Livewire 3: Bootstrap Modal Open/Close with Browser Events
Table of Contents
In this tutorial, we’ll explore how to use Laravel Livewire 3 to dynamically open and close Bootstrap modals using browser events. By leveraging Livewire’s simplicity, you can create dynamic, interactive user interfaces without diving into the complexities of modern JavaScript frameworks like Vue or React.
What is Livewire?
Livewire is a full-stack framework for Laravel that allows you to build dynamic interfaces directly in PHP. It eliminates the need for complex JavaScript, offering a simple yet powerful way to enhance your applications.
What are Browser Events in Livewire?
Browser events in Livewire allow seamless communication between components and JavaScript on your page. By triggering events using dispatch(), you can control UI elements such as modals, tooltips, and more.
This tutorial will guide you through creating a dynamic Bootstrap modal powered by Livewire browser events.
Preview:
Step 1: Setting Up the Laravel Project
Before diving into the implementation, ensure you have a Laravel project set up with Livewire installed.
Open your terminal and run the following command to create a fresh Laravel application:
composer create-project laravel/laravel LaravelBSApp
Step 2: Installing Livewire V3
Install Livewire in Laravel with the following command in your application root directory
Next, install Livewire using this command:
composer require livewire/livewire
Step 3: Creating a Template Layout
This command will generate a file called resources/views/components/layouts/app.blade.php
php artisan livewire:layout
Step 4: Integrating Bootstrap
Include livewire frontend Assets and add bootstrap CDN link in the following path: resources/views/components/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
@livewireStyles
</head>
<body>
@livewireScripts
@yield('script')
</body>
</html>
Step 5: Creating a Livewire Component
- Let's create BoostrapModal Livewire component with the following command:
php artisan make:livewire Boostrap\\ModalExampleAfter successfully creating the ModalExample Livewire component, you see two files in app folder and resources folder.
CLASS: app/Livewire//Boostrap/ModalExample.php VIEW: resources/views/livewire/boostrap/modal-example.blade.php - Now, open app/Livewire//Boostrap/ModalExample.php and update the following code into this file:
namespace App\Livewire\Boostrap; use Livewire\Component; class ModalExample extends Component { public function render() { return view('livewire.boostrap.modal-example'); } public function showModal(){ $this->dispatch('open-bs-modal'); } public function closeModal(){ $this->dispatch('close-bs-modal'); } } -
Next, go to livewire component in the following path: resources/views/livewire/boostrap/modal-example.blade.php and paste the below code:
<div> <h1>Laravel-11 Livewire Bootstrap Modal Open/Close using Browser Events</h1> <button type="button" data-bs-toggle="tooltip" title="BS-Modal" class="btn btn-primary btn-sm my-2" wire:click="showModal()"> Open Modal </button> <div wire:ignore.self class="modal fade text-left" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel17">Modal title</h4> <button wire:ignore type="button" class="close" data-bs-dismiss="modal" aria-label="Close" wire:click="closeModal()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="card m-0"> <div class="card-body px-4"> <p>Modal body text goes here.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal" wire:click="closeModal()"> <i class="bx bx-x d-block d-sm-none"></i> <span class="d-none d-sm-block">Close</span> </button> <button type="button" class="btn btn-primary ms-1" data-bs-dismiss="modal"> <i class="bx bx-check d-block d-sm-none"></i> <span class="d-none d-sm-block">Save </span> </button> </div> </div> </div> </div> </div> @script $wire.on('close-bs-modal', event => { console.log("event-close", event); $('#viewModal').modal('hide'); }); $wire.on('open-bs-modal', event => { console.log("event-open", event); $('#viewModal').modal('show'); }); @endscript
Use wire:ignore.self on the modal div, so it will not change this tag when rendering with new data, that way livewire will not interfere with bootstrap js.
In that way, you will be able to close/open the modal by triggering the dispatch browser event
Step 6: Setting Up Routes for Full-Page Components
Livewire allows you to assign components directly to a route in your Laravel application. These are called “full-page components”.
Define a route in your routes/web.php file and use the Route::get() method to map the component directly to a specific URL
For example, let's imagine you want to render the ModalExample component at the dedicated route:
/bs-modal-example
You can accomplish this by adding the following line to your routes/web.php file:
use App\Livewire\Boostrap\ModalExample;
Route::get('/bs-modal-example', ModalExample::class);
Step 7: Run the Project and Navigate to the Browser
- Serve the application locally:
php artisan serveThis will start the server and provide you with a local URL to access your application.
Access the Component in the Browser Open your preferred web browser and navigate to:
http://localhost:8000/bs-modal-example
Conclusion
This tutorial explored using Laravel 11 Livewire 3 with browser events to create dynamic Bootstrap modals. By leveraging Livewire's simplicity and Bootstrap's flexibility, you can build interactive, maintainable user interfaces without complex JavaScript frameworks. This approach is ideal for modern, efficient Laravel applications.
0 Comments