README

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

Warning: This package is not backward compatible with Livewire 2.

Documentation

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

Installation

Require the package:

composer require kezeneilhou/livewire-tailwind-modal

Install Flowbit:

npm install flowbite

Add the view paths and require Flowbite as a plugin inside tailwind.config.js

module.exports = {
    content: [
      "./node_modules/flowbite/**/*.js"
    ],
    theme: {
      extend: {},
    },
    plugins: [
        require('flowbite/plugin')
    ],
}

Import the Flowbite JavaScript package inside the ./resources/js/app.js file to enable the interactive modals.

import 'flowbite';

Add the livewire:modals component to your app layout view:

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

Require ../../vendor/kezeneilhou/livewire-tailwind-modal/resources/js/modals in your app javascript file:

import '../../vendor/kezeneilhou/livewire-tailwind-modal/resources/js/modals.js';

Usage

To call from a normal blade view

<button type="button" onclick="Livewire.dispatch('showModal', {data: {'alias' : 'modals.example'}})">
                            Click me to open modal
                        </button>

Showing Modals

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

<div>
    <button type="button"wire:click="$dispatch('showModal', {data: {'alias' : 'modals.example'}})">
Click me
    </button>
</div>

Mount Parameters

Pass parameters to the component mount method after the alias:

<div>
    <button type="button" wire:click="$dispatch('showModal', {data: {'alias' : 'modals.example', 'params' : {'name': 'test'}, 'size': '4', 'title': 'Test Modal'}})">
    Click me to open modal
</button>
</div>

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="$dispatch('hideModal')">
    {{ __('Close') }}
</button>

Emitting Events

You can emit events inside your views:

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

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

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

    // save the record

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

Publishing Assets

Custom View

Use your own modals view by publishing the package view:

php artisan vendor:publish --tag=livewire-tailwind-modal:views

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