PHPackages                             microweber-deps/wire-elements-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. microweber-deps/wire-elements-modal

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

microweber-deps/wire-elements-modal
===================================

Laravel Livewire modal component

1.0(1y ago)012.9k↓50%MITPHP

Since Jan 22Pushed 1y agoCompare

[ Source](https://github.com/microweber-deps/wire-elements-modal)[ Packagist](https://packagist.org/packages/microweber-deps/wire-elements-modal)[ GitHub Sponsors](https://github.com/PhiloNL)[ RSS](/packages/microweber-deps-wire-elements-modal/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

[![Build Status](https://github.com/wire-elements/modal/workflows/PHPUnit/badge.svg)](https://github.com/wire-elements/modal/actions)[![Total Downloads](https://camo.githubusercontent.com/d7378a2d3a63bb46b71d9f3055359eb334c72b827ff0c77ccd2681dddc97b89c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f776972652d656c656d656e74732f6d6f64616c)](https://packagist.org/packages/wire-elements/modal)[![Total Downloads](https://camo.githubusercontent.com/e69bfed3f05e1cc21db073fd958d187aca6e2ee357ed2c80da2173d10785d145/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6c697665776972652d75692f6d6f64616c)](https://packagist.org/packages/livewire-ui/modal)[![Latest Stable Version](https://camo.githubusercontent.com/f000688e17067f149fa1d4d61aea51ebd2342fe093dae57fa7c6d9ecd9886a69/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f776972652d656c656d656e74732f6d6f64616c)](https://packagist.org/packages/wire-elements/modal)[![License](https://camo.githubusercontent.com/6f725805e42be7a22cc65a3ff35afb82526a61dd19401a27dee0055ee1aa0e50/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f776972652d656c656d656e74732f6d6f64616c)](https://packagist.org/packages/wire-elements/modal)

Livewire v3
-----------

[](#livewire-v3)

This is the readme for Livewire v3. **If you are looking for the readme for Livewire v2 [click here](https://github.com/wire-elements/modal/tree/1.0.0).**

### Upgrading from v2

[](#upgrading-from-v2)

You can use the following command to automate the upgrade process:

```
php artisan livewire:upgrade --run-only wire-elements-modal-upgrade
```

Please review the changes and ensure they follow the new convention set by Livewire v3:

```

Show Users

Show Users

Edit User

Edit User
```

The old component name is being deprecated. Replace `@livewire('livewire-ui-modal')` with `@livewire('wire-elements-modal')`.

The config file has been renamed as well. If you've published the config in the past, you will have to do so again and make the necessary changes:

```
php artisan vendor:publish --tag=wire-elements-modal-config
```

After upgrading, make sure to clear your view cache:

```
php artisan view:clear
```

About Wire Elements Modal
-------------------------

[](#about-wire-elements-modal)

Wire Elements Modal is a Livewire component that provides you with a modal that supports multiple child modals while maintaining state.

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

[](#installation)

[![](https://camo.githubusercontent.com/74b3c1a0927345afedb3ec2f98e0b7dd79d346ada1cb65daff0d00821f0444d4/68747470733a2f2f642e70722f692f4752363642332b)](https://philo.dev/laravel-modals-with-livewire/)

Click the image above to read a full article on using the Wire Elements modal package or follow the instructions below.

To get started, require the package via Composer:

```
composer require wire-elements/modal:^2.0

```

Livewire directive
------------------

[](#livewire-directive)

Add the Livewire directive `@livewire('wire-elements-modal')` directive to your template.

```

    @livewire('wire-elements-modal')

```

TailwindCSS
-----------

[](#tailwindcss)

The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.

```
php artisan vendor:publish --tag=wire-elements-modal-views
```

Creating a modal
----------------

[](#creating-a-modal)

You can run `php artisan make:livewire EditUser` to make the initial Livewire component. Open your component class and make sure it extends the `ModalComponent` class:

```