Skip to content

smirltech/livewire-modals

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Livewire Charts

Livewire Modals

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

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

Documentation

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.

About

Dynamic Laravel Livewire Bootstrap modals.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 48.4%
  • Blade 43.5%
  • JavaScript 8.1%