Laravel developer Philo Hermans is cooking up the wire-extender Livewire package that allows you to embed a component on any website or even a static HTML file. This package is still at an early stage, but I thought it would be as good a time as any to share!
The gist of this package is using the Embeddable attribute in a Livewire component along with a wire-extender.js file that ships with this package:
use WireElements\WireExtender\Attributes\Embeddable;
#[Embeddable]
class Counter extends Component {}
After creating the component like a normal Livewire component and following the documentation, you can embed the component like so:
<script src="//unpkg.com/@wire-elements/wire-extender"
data-uri="https://example.com">
</script>
<!-- ... -->
<livewire data-component="counter" data-params='{"count":10}'>
<!-- Placeholder... -->
</livewire>
During the initial API call, the <livewire> placeholder content will be shown and then replaced by the Livewire component rendering.
You can check out Wire Extender on GitHub at wire-elements/wire-extender and follow the documentation to try it out!
The post Embed Livewire Components on Any Website appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.