包简介

Dynamic Laravel Livewire 3 Tailwind modals.

README 文档

README

# Laravel Livewire Tailwind Modals

A dynamic global modal component for **Laravel 12** and **Livewire 4**, built to work seamlessly with **Livewire Flux**.

This package allows you to load any Livewire component inside a single reusable modal, without polluting your DOM with multiple modal instances.

---

## 📋 Requirements

- PHP 8.2+
- Laravel 12+
- Livewire 4+
- Livewire Flux (must be installed and configured)

---

## 📦 Installation

Install the package via Composer:

```bash
composer require kezeneilhou/livewire-tailwind-modal

⚙️ Setup

1. Publish Assets

Publish the JavaScript and view files:

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

2. Register JavaScript (Vite)

Import the modal script into your main app.js file:

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

Then rebuild assets:

npm run dev

3. Configure Layout

Add the <livewire:modals /> component to your main layout (for example: layouts/app.blade.php).

Place it near the end of the <body> tag.

Make sure @fluxScripts and @livewireScripts are included.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    @fluxStyles
</head>

<body class="min-h-screen bg-white dark:bg-zinc-800">

    {{ $slot }}

    <!-- Global Modal -->
    <livewire:modals />

    @fluxScripts
    @livewireScripts
</body>
</html>

🚀 Usage

Opening a Modal (Blade / JavaScript)

You can trigger a modal from a normal Blade view or JavaScript using Livewire.dispatch.

<button
    type="button"
    onclick="Livewire.dispatch('showModal', { 
        data: { alias: 'modals.example' } 
    })"
>
    Open Modal
</button>

Opening from a Livewire View

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

📌 Passing Parameters

You may pass parameters, size, and title when opening a modal.

Supported Sizes

Value	Width
1 or `sm`	Small
2 or `md`	Medium (default)
3 or `lg`	Large
4 or `xl`	Extra Large
5 or `2xl`	2XL
6 or `3xl`	3XL
`4xl`-`7xl`	Larger widths
`full`	Viewport width cap

The modal width is responsive and capped to the viewport, so large sizes still fit on small screens.

Example with Parameters

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

Receiving Parameters in Component

namespace App\Http\Livewire\Users;

use Livewire\Component;

class Update extends Component
{
    public function mount($name)
    {
        // $name = "test"
    }

    public function render()
    {
        return view('users.update');
    }
}

❌ Closing Modals

From Blade

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

From Livewire Component

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

    // Save logic...

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

📤 Publishing Views (Customization)

If you want to customize the modal layout or animations, publish the package view:

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

The view will be copied to:

resources/views/vendor/livewire-tailwind-modal

You may edit it freely. The package will automatically use your customized view.

🛠 Troubleshooting

JavaScript Not Loading

Make sure:

Assets are published
modals.js is imported in app.js
npm run build has been executed

Alpine Errors

Ensure Alpine is loaded before modals.js:

import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

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

kezeneilhou/livewire-tailwind-modal 适用场景与选型建议

kezeneilhou/livewire-tailwind-modal 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 843 次下载、GitHub Stars 达 0，最近一次更新时间为 2024 年 06 月 28 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 kezeneilhou/livewire-tailwind-modal 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 kezeneilhou/livewire-tailwind-modal 我们能提供哪些服务？

定制开发 / 二次开发

基于 kezeneilhou/livewire-tailwind-modal 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

kezeneilhou/livewire-tailwind-modal

包简介