turn laravel livewire component into modal

v1.2.0 2023-03-27 13:36 UTC

This package is auto-updated.

Last update: 2024-04-27 16:09:10 UTC


Latest Version on Packagist Total Downloads

Turn Laravel Livewire Component into Modal.


🏷 Features

  • Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )
  • Skeleton loading indicator
  • Support alert message ( info, warning, success, danger )
  • Trigger from Alpine Component / Vanilla JS / Livewire Class Component

🧾 Requirements

Bootstrap 4 or 5 no bootstrap support coming soon
Jquery for bootstrap 4 only
Laravel >= 7
Livewire >= 2.0
Alpine JS

📥 Installation

composer require devsrv/livewire-modal

Include the base modal component

    <script src="" defer></script>
    <x-livewiremodal-base /> 👈

Publish assets

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public

Publish config

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=config

config support bootstrap theme: bs4 | bs5

📌 Updating

Important: when updating the package make sure to re-publish the assets with --force flag

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public --force

⚗️ Usage

68747470733a2f2f6c61726176656c2d6c697665776972652e636f6d2f66617669636f6e2e69636f Create Livewire Component

No consideration required, create livewire component as usual. Use livewire's mount to handle passed parameters

✨ Open Modal

✔️ From Alpine Component
<div x-data>
  <button type="button" x-on:click='$dispatch("open-x-modal", {
    title: "Heading Title",
    modal: "livewire-component-name",
    size: "xl",
    args: {{ json_encode($data_array) }}
✔️ Via Vanilla JS
<button type="button" onclick='_openModal("Heading", "component-name", {{ json_encode($data) }}, "sm")'>
✔️ Via Trigger Blade Component
<x-livewiremodal-trigger class="btn" 
	title="Modal Heading"
   :args="['sky' => 'blue', 'moon' => 1]" 
✔️ From Livewire Class
$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);

💡 Modal size supports sm lg xl // completely optional

🌈 Bonus

you are free to put content in livewire view file in any structure, however the package provides an blade component for bootstrap modal which you can use as:

    <div class="row">

    <x-slot name="footer">
        <button type="button" class="..">Save</button>

✌🏼 Two reasons to use this component

🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes

🟢 alert notification message which can be triggered by:

$this->info('<strong>Hi !</strong>, i am an alert');  // support `info` `warning` `success` `danger`


Please see CHANGELOG for more information on what has changed recently.


The MIT License (MIT). Please see License File for more information.

👋🏼 Say Hi!

Leave a ⭐ if you find this package useful 👍🏼, don't forget to let me know in Twitter