10-Apr-2023
.
Admin
Hello Friends,
In this blog, I would like to share with you how to open bootstrap modal livewire in laravel application.I will show you a complete example for open boostrap modal example with laravel livewire.
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communicaton.
Here I will give full example for how to open bootstrap modal in laravel livewire,So Lets follow the bellow step.
Step 1 : Install Laravel App
In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.
composer create-project --prefer-dist laravel/laravel blog
Step 2 : Setup Database Configuration
After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3 : Install Livewire
In this step, You will simply install livewire to our laravel application using bellow command:
composer require livewire/livewire
Step 4 : Create Component
Now, You can create livewire component using bellow command, So Let's run bellow command to create user form component:
php artisan make:livewire bootstrap-modal
Now they created fies on both path:
app/Http/Livewire/BootstrapModal.php
resources/views/livewire/bootstrap-modal.blade.php
Now first file we will update as bellow for BootstrapModal.php file.
app/Http/Livewire/BootstrapModal.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\User;
class BootstrapModal extends Component
{
public function render()
{
return view('livewire.bootstrap-modal');
}
}
Step 5 : Add Route
now, we need to add route for open modal in laravel application. so open your "routes/web.php" file and add following route.
routes/web.php
Route::view('boostrap-modal','livewire.home');
Step 6 : Create View
Here, we will create blade file for call modal route. in this file we will use @livewireStyles, @livewireScripts and @livewire('bootstrap-modal'). so let's add it.
resources/views/livewire/bootstrap-modal.blade.php
<div>
<div class="row mt-5">
<div class="col-md-6 offset-3">
<div class="card">
<div class="card-header bg-info text-white">
<h5><strong>Laravel Livewire Bootstrap Modal Example - NiceSnippets.com</strong></h5>
</div>
<div class="card-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open Modal
</button>
<div wire:ignore.self class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true close-btn">×</span>
</button>
</div>
<div class="modal-body">
Laravel Livewire Bootstrap Modal Example - NiceSnippets.com
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">Close</button>
<button type="button" wire:click.prevent="store()" class="btn btn-primary close-modal">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
resources/views/livewire/home.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@livewireStyles
</head>
<body>
@livewire('bootstrap-modal')
@livewireScripts
</body>
</html>
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/boostrap-modal
It will help you..
Preview
#Laravel 8
#Laravel 7
#Laravel
#Laravel 6