PHPackages                             aliqasemzadeh/livewire-bootstrap-modal - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. aliqasemzadeh/livewire-bootstrap-modal

ActiveLibrary[Utility & Helpers](/categories/utility)

aliqasemzadeh/livewire-bootstrap-modal
======================================

Dynamic Laravel Livewire 3 Bootstrap modals.

v2.3.0(1y ago)4621.7k↓35.7%12MITPHP

Since Jun 4Pushed 1y ago3 watchersCompare

[ Source](https://github.com/aliqasemzadeh/livewire-bootstrap-modal)[ Packagist](https://packagist.org/packages/aliqasemzadeh/livewire-bootstrap-modal)[ Docs](https://github.com/aliqasemzadeh/livewire-bootstrap-modal)[ RSS](/packages/aliqasemzadeh-livewire-bootstrap-modal/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (5)Dependencies (2)Versions (6)Used By (0)

Laravel Livewire Modals
=======================

[](#laravel-livewire-modals)

This package allows you to dynamically show your Laravel Livewire 3 components inside Bootstrap modals.

**Warning:** This package is not backward compatible with Livewire 2.

Documentation
-------------

[](#documentation)

- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
    - [Modal Views](#modal-views)
    - [Showing Modals](#showing-modals)
    - [Mount Parameters](#mount-parameters)
    - [Hiding Modals](#hiding-modals)
    - [Dispatching Modals](#dispatching-modals)
    - [Custom modal size](#custom-modal-size)
- [Publishing Assets](#publishing-assets)
    - [Custom View](#custom-view)
- [Notes](#notes)

Requirements
------------

[](#requirements)

- Bootstrap 5 and PopperJS must be installed via npm first

```
npm install bootstrap
npm install @popperjs/core
```

Installation
------------

[](#installation)

Require the package:

```
composer require aliqasemzadeh/livewire-bootstrap-modal
```

Add the `livewire:modals` component to your app layout view:

```

```

Require `../../vendor/aliqasemzadeh/livewire-bootstrap-modal/resources/js/modals` in your app javascript file:

```
import('@popperjs/core');
import '../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
import '../../vendor/aliqasemzadeh/livewire-bootstrap-modal/resources/js/modals.js';
```

Usage
-----

[](#usage)

### Modal Views

[](#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:

```

            Modal title

            Modal body text goes here.

            Close
            Save changes

```

### Showing Modals

[](#showing-modals)

Show a modal by emitting the `showModal` event with the component alias:

```

    {{ __('Update Profile') }}

```

### Mount Parameters

[](#mount-parameters)

Pass parameters to the component `mount` method after the alias:

```

    {{ __('Update User #' . $user->id) }}

```

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

[](#hiding-modals)

Hide the currently open modal by emitting the `hideModal` event:

```

    {{ __('Close') }}

```

### Dismissing Modals

[](#dismissing-modals)

You can emit events inside your views:

```

    {{ __('Close') }}

```

Or inside your components, just like any normal Livewire event:

```
public function save()
{
    $this->validate();

    // save the record

    $this->dispatch('hideModal');
}
```

### Custom modal size

[](#custom-modal-size)

Now you can have custom modal size by default we use `modal-lg`:

```

  {{ __('Show XL Modal') }}

```

Publishing Assets
-----------------

[](#publishing-assets)

### Custom View

[](#custom-view)

Use your own modals view by publishing the package view:

```
php artisan vendor:publish --tag=livewire-bootstrap-modal:views
```

Now edit the view file inside `resources/views/vendor/livewire-bootstrap-modal`. The package will use this view to render the component.

Notes
-----

[](#notes)

1- You should use button or @click in main slot.

2- We are working hard on some problems, We hope fix them soon.

3- We will add some options soon.

4- wire:navigate not work (just first modal open).

###  Health Score

39

—

LowBetter than 84% of packages

Maintenance41

Moderate activity, may be stable

Popularity40

Moderate usage in the ecosystem

Community17

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 67.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~158 days

Total

5

Last Release

491d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/26847446?v=4)[Ali Qasemzadeh](/maintainers/aliqasemzadeh)[@aliqasemzadeh](https://github.com/aliqasemzadeh)

---

Top Contributors

[![aliqasemzadeh](https://avatars.githubusercontent.com/u/26847446?v=4)](https://github.com/aliqasemzadeh "aliqasemzadeh (45 commits)")[![mozhuilungdsuo](https://avatars.githubusercontent.com/u/33083654?v=4)](https://github.com/mozhuilungdsuo "mozhuilungdsuo (19 commits)")[![marispro](https://avatars.githubusercontent.com/u/5610414?v=4)](https://github.com/marispro "marispro (2 commits)")[![MDylan](https://avatars.githubusercontent.com/u/2527132?v=4)](https://github.com/MDylan "MDylan (1 commits)")

---

Tags

boostrapbootstrap5laravellaravel-livewirelivewierelivewire-bootstrap-modallivewire-componentlivewire-laravellivewire-modalmodal

### Embed Badge

![Health badge](/badges/aliqasemzadeh-livewire-bootstrap-modal/health.svg)

```
[![Health](https://phpackages.com/badges/aliqasemzadeh-livewire-bootstrap-modal/health.svg)](https://phpackages.com/packages/aliqasemzadeh-livewire-bootstrap-modal)
```

###  Alternatives

[nasirkhan/laravel-starter

A CMS like modular Laravel starter project.

1.4k2.7k](/packages/nasirkhan-laravel-starter)[team-nifty-gmbh/tall-datatables

Server-side rendered datatables for Laravel and Livewire

1320.9k4](/packages/team-nifty-gmbh-tall-datatables)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)[ramonrietdijk/livewire-tables

Dynamic tables for models with Laravel Livewire

21259.6k](/packages/ramonrietdijk-livewire-tables)[noerd/noerd

101.4k6](/packages/noerd-noerd)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)