Livewire and Alpine event bridging

Imagine emitting an event from a Livewire component:

$this->emit('formSubmitted');

And being able to catch it using Alpine:

<div x-data="modal()" x-on:livewire:formSubmitted="close()">

Please tell me I’m not the only one wanting some sort of bridge between Livewire and Alpine!

From the release notes on 0.7.0: (I don’t think there’s anything in the docs yet)

Added $this->dispatchBrowserEvent('foo') component method to instruct the root dom node of a component to dispatch a custom JS event in the browser. Useful for communicating with JS code like AlpineJS.

1 Like

There is also the alpine-plugin. Not sure if that is helpful for you or not - https://github.com/livewire/alpine-plugin