Embed Livewire Components on Any Website

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!