Laravel Livewire Bootstrap Modal Example

10-Apr-2023

.

Admin

Laravel Livewire Bootstrap Modal Example

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