在任何网站上嵌入 Livewire 组件

Laravel 开发者 Philo Hermans 正在开发 wire-extender Livewire 包，该包允许您在任何网站甚至静态 HTML 文件中嵌入组件。这个包还处于早期阶段，但我认为现在是分享它的好时机！

该包的核心是使用 Livewire 组件中的 Embeddable 属性以及随包附带的 wire-extender.js 文件

use WireElements\WireExtender\Attributes\Embeddable;
 
#[Embeddable]
class Counter extends Component {}

创建组件就像创建普通的 Livewire 组件一样，然后按照 文档，您可以像这样嵌入组件

<script src="//unpkg.com/@wire-elements/wire-extender"
        data-uri="https://example.com">
</script>
 
<!-- ... -->
 
<livewire data-component="counter" data-params='{"count":10}'>
        <!-- Placeholder... -->
</livewire>

在初始 API 调用期间，将显示 <livewire> 占位符内容，然后用 Livewire 组件渲染结果替换它。

您可以在 GitHub 上查看 Wire Extender，地址为 wire-elements/wire-extender，并按照 文档 进行尝试！