PHPackages                             rawitjan/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. rawitjan/livewire-bootstrap-modal

ActiveLibrary

rawitjan/livewire-bootstrap-modal
=================================

Dynamic Laravel Livewire 3 Bootstrap modals.

v3.1(11mo ago)030MITPHP

Since Mar 15Pushed 11mo agoCompare

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

READMEChangelog (2)Dependencies (2)Versions (3)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

29

—

LowBetter than 60% of packages

Maintenance50

Moderate activity, may be stable

Popularity7

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 65.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 ~426 days

Total

2

Last Release

359d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/46b1763023a87b6174214478ef474ada28e417c92fc89254d05a144f50cbb019?d=identicon)[rawitjan](/maintainers/rawitjan)

---

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)")[![rawitjan](https://avatars.githubusercontent.com/u/88061883?v=4)](https://github.com/rawitjan "rawitjan (2 commits)")[![MDylan](https://avatars.githubusercontent.com/u/2527132?v=4)](https://github.com/MDylan "MDylan (1 commits)")

### Embed Badge

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

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

###  Alternatives

[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4195.3M84](/packages/livewire-volt)[namu/wirechat

A Laravel Livewire messaging app for teams with private chats and group conversations.

54324.5k](/packages/namu-wirechat)[mhmiton/laravel-modules-livewire

Using Laravel Livewire in Laravel Modules package with automatically registered livewire components for every modules.

236409.6k9](/packages/mhmiton-laravel-modules-livewire)[ramonrietdijk/livewire-tables

Dynamic tables for models with Laravel Livewire

21147.4k](/packages/ramonrietdijk-livewire-tables)[lakm/laravel-comments

Integrate seamless commenting functionality into your Laravel project.

40012.9k1](/packages/lakm-laravel-comments)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

2381.5k10](/packages/marcorieser-statamic-livewire)

PHPackages © 2026

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