Livewire Modals

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

Documentation

• Requirements
• Installation
• Usage
  • Modal Views
  • Showing Modals
  • Mount Parameters
  • Hiding Modals
  • Emitting Events
• Publishing Assets
  • Custom View

Requirements

Install Bootstrap 5 and Popper.js 2 in your app. See the Bootstrap 5 docs 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

Require the package:

composer require smirltech/livewire-modals

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

<livewire:modals/>
<livewire:scripts/>
<script src="{{ asset('js/app.js') }}"></script>
<x-modals::scripts/>

Usage

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:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

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

<x-modals::base title="Modal title">
    Modal body text goes here.
</x-modals::base>

Showing Modals

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

<button type="button" wire:click="$emit('showModal', 'auth.profile-update')">
    {{ __('Update Profile') }}
</button>

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

<button type="button" onclick="showModal('auth.profile-update')">
    {{ __('Update Profile') }}
</button>

or

<script>
    Livewire.emit('showModal', 'auth.profile-update');
</script>

Mount Parameters

Pass parameters to the component mount method after the alias:

<button type="button" wire:click="$emit('showModal', 'users.update', '{{ $user->id }}')">
    {{ __('Update User #' . $user->id) }}
</button>

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

Hide the currently open modal by emitting the hideModal event:

<button type="button" wire:click="$emit('hideModal')">
    {{ __('Close') }}
</button>

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

<button type="button" data-bs-dismiss="modal">
    {{ __('Close') }}
</button>

Emitting Events

You can emit events inside your views:

<button type="button" wire:click="$emit('hideModal')">
    {{ __('Close') }}
</button>

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

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

    // save the record

    $this->emit('hideModal');
}

Publishing Assets

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.