PHPackages                             smirltech/livewire-modals - 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. smirltech/livewire-modals

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

smirltech/livewire-modals
=========================

Dynamic Laravel Livewire Bootstrap modals.

v2.2.2(2y ago)23.1k2MITPHPPHP ^8.0

Since Feb 19Pushed 1y agoCompare

[ Source](https://github.com/smirltech/livewire-modals)[ Packagist](https://packagist.org/packages/smirltech/livewire-modals)[ Docs](https://github.com/smirltech/livewire-modals)[ RSS](/packages/smirltech-livewire-modals/feed)WikiDiscussions 2.x Synced 1mo ago

READMEChangelogDependencies (3)Versions (11)Used By (0)

[![Livewire Charts](https://camo.githubusercontent.com/3a670659e6860a83a85bb64f930223a312b263b9526bb454b8b03e624048f414/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c697665776972652532304d6f64616c732e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d736d69726c746563682532466c697665776972652d6d6f64616c73267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d44796e616d69632b4c61726176656c2b4c697665776972652b426f6f7473747261702b6d6f64616c732e266d643d312673686f7757617465726d61726b3d3126666f6e7453697a653d313030707826696d616765733d68747470732533412532462532466c61726176656c2e636f6d253246696d672532466c6f676f6d61726b2e6d696e2e737667)](https://camo.githubusercontent.com/3a670659e6860a83a85bb64f930223a312b263b9526bb454b8b03e624048f414/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c697665776972652532304d6f64616c732e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d736d69726c746563682532466c697665776972652d6d6f64616c73267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d44796e616d69632b4c61726176656c2b4c697665776972652b426f6f7473747261702b6d6f64616c732e266d643d312673686f7757617465726d61726b3d3126666f6e7453697a653d313030707826696d616765733d68747470732533412532462532466c61726176656c2e636f6d253246696d672532466c6f676f6d61726b2e6d696e2e737667)

Livewire Modals
===============

[](#livewire-modals)

[![Latest Version on Packagist](https://camo.githubusercontent.com/6811663443e5be7ed1e54e75933219340ca60a210da5b3c47cc6c13f1518d30d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736d69726c746563682f6c697665776972652d6d6f64616c732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/smirltech/livewire-modals)[![GitHub Tests Action Status](https://camo.githubusercontent.com/531637be58ce2785921d5649583a92cf4e6f6bd30f4d91e22781091b3584f39d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f736d69726c746563682f6c697665776972652d6d6f64616c732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/smirltech/livewire-modals/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/0cf4e95bcc5b1868c57cc9401db78dd3d0bd348238f3e059f7a0ccd2e9424266/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f736d69726c746563682f6c697665776972652d6d6f64616c732f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/smirltech/livewire-modals/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/20c42a9087329384a23edbc2da8e2c1b6570f4d0b0b7edebc83e07edb94fdcd6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736d69726c746563682f6c697665776972652d6d6f64616c732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/smirltech/livewire-modals)

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

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

[](#documentation)

- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
    - [Modal Views](#modal-views)
    - [Showing Modals](#showing-modals)
    - [Mount Parameters](#mount-parameters)
    - [Hiding Modals](#hiding-modals)
    - [Emitting Events](#emitting-events)
- [Publishing Assets](#publishing-assets)
    - [Custom View](#custom-view)

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

[](#requirements)

Install Bootstrap 5 and Popper.js 2 in your app. See the [Bootstrap 5 docs](https://getbootstrap.com/docs/5.0/getting-started/introduction/#js) for more information.

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

Require `bootstrap` and `popper.js` packages in your app javascript file. Then import the `Modal` class from `bootstrap` and add it to the `window` object.

Using `mix`

```
require('@popperjs/core');
require('bootstrap');

import {Modal} from 'bootstrap';

window.Modal = Modal;
```

Using `vite`

```
import('@popperjs/core');
import('bootstrap');

import {Modal} from 'bootstrap';

window.Modal = Modal;
```

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

[](#installation)

Require the package:

```
composer require smirltech/livewire-modals
```

Add `livewire:modals` and `x-modals::scripts` components to your layout:

```

```

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

```

Alternatively, you can use the `x-modals::base` or `x-modals::form` component:

```

    Modal body text goes here.

```

### Showing Modals

[](#showing-modals)

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

```

    {{ __('Update Profile') }}

```

Outside of Livewire components, you can use the `Livewire.emit` method:

```

    {{ __('Update Profile') }}

```

or

```

    Livewire.emit('showModal', 'auth.profile-update');

```

### 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') }}

```

Or by using the Bootstrap `data-bs-dismiss` attribute:

```

    {{ __('Close') }}

```

### Emitting Events

[](#emitting-events)

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->emit('hideModal');
}
```

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

[](#publishing-assets)

### Custom View

[](#custom-view)

Use your own modals view by publishing the package view:

```
php artisan vendor:publish --tag=livewire-modals:views
```

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

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance33

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 77.5% 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 ~73 days

Recently: every ~165 days

Total

11

Last Release

447d ago

Major Versions

v1.0.1 → v2.0.02023-04-17

v2.2.2 → 3.x-dev2024-12-19

### Community

Maintainers

![](https://www.gravatar.com/avatar/bb55d4ea00134836f606f459e4474d27857fe712d3b74e174dd8feb46a5207f2?d=identicon)[MarienMupenda](/maintainers/MarienMupenda)

---

Top Contributors

[![MarienMupenda](https://avatars.githubusercontent.com/u/57844897?v=4)](https://github.com/MarienMupenda "MarienMupenda (86 commits)")[![bastinald](https://avatars.githubusercontent.com/u/82109804?v=4)](https://github.com/bastinald "bastinald (18 commits)")[![francisnnumbi](https://avatars.githubusercontent.com/u/23620828?v=4)](https://github.com/francisnnumbi "francisnnumbi (6 commits)")[![juanmanavarro](https://avatars.githubusercontent.com/u/1380040?v=4)](https://github.com/juanmanavarro "juanmanavarro (1 commits)")

### Embed Badge

![Health badge](/badges/smirltech-livewire-modals/health.svg)

```
[![Health](https://phpackages.com/badges/smirltech-livewire-modals/health.svg)](https://phpackages.com/packages/smirltech-livewire-modals)
```

###  Alternatives

[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4195.3M84](/packages/livewire-volt)[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[ramonrietdijk/livewire-tables

Dynamic tables for models with Laravel Livewire

21147.4k](/packages/ramonrietdijk-livewire-tables)[ralphjsmit/livewire-urls

Get the previous and current url in Livewire.

82270.3k4](/packages/ralphjsmit-livewire-urls)[kirschbaum-development/commentions

A package to allow you to create comments, tag users and more

12369.2k](/packages/kirschbaum-development-commentions)[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)