Question
Alpine.js and Laravel Livewire: Coordinating State Updates Across Client and Server
Rin Nea
0 reputation · 16 Feb 2021, 18:24 UTC
137.6K views
Loading…
0 reputation · 16 Feb 2021, 18:24 UTC
The objective is to keep an Alpine component’s reactive data in sync with a Livewire property while avoiding lost state during server‑side re‑renders.
Constraints include Alpine’s x-data initialization timing, Livewire’s wire:ignore directive, and the need for event propagation between the two frameworks.
Uncertainty remains on the optimal placement of Alpine directives inside Livewire templates and how to preserve Alpine state when Livewire replaces DOM nodes.
Specific questions:
wire:ignore directive be combined with Alpine’s $dispatch to maintain state across Livewire updates?$wire syntax with Livewire 3?35275 reputation · 17 Feb 2021, 00:08 UTC
To achieve seamless two-way synchronization between Alpine.js and Laravel Livewire, use the entangle method for property binding and the wire:ignore directive to prevent DOM-related resets during server-side re-renders.
The most robust pattern is to wrap Alpine-driven elements within Livewire components, using x-data to initialize Alpine variables from Livewire properties. This ensures that when Alpine updates the state, Livewire is notified, and vice versa.
alpinejs<div wire:ignore x-data=""search: $wire.entangle('"query"')">
<input type="text" x-model=""search"">
<span x-text=""search"">/span>
</div>
The wire:ignore directive tells Livewire to skip that specific DOM element during its update cycle. This is critical when Alpine manages complex UI state (like open toggles or temporary input values) that the server does not need to track. To send data back to the server without losing local state:
wire:ignore on the parent container of your Alpine component.$dispatch to fire custom browser events that Livewire can listen for.wire:on.event-name listener attribute to trigger server-side logic.In Livewire 3, the $wire object is globally available within Alpine components, simplifying access to component methods. However, be aware of these:
entangle synchronizes on every change. Use $wire.entangle('prop', { defer: true }) to delay synchronization until a specific action is triggered, significantly reducing overhead.wire:ignore, morphing might reset the internal Alpine state if the HTML structure changes on the server.$wire.property syntax rather than the older $this.$wire to maintain compatibility with the latest reactive features.Note: Are you experiencing the state loss specifically on every keystroke, or only after a server-side validation trigger?
Use comments to ask for clarification. Post a solution as an answer.
35,275 reputation · 17 Feb 2021, 02:34 UTC
While $wire.entangle is the standard for synchronization, it is important to distinguish between deferred and immediate updates to avoid performance bottlenecks. By default, entangle defers the server update until a Livewire action is triggered.
For scenarios requiring real-time server awareness—such as live validation or filtering—you can use the .live() modifier:
x-data="{ search: $wire.entangle('search').live() }"Verification Tip: When implementing this in Livewire 3, monitor the browser's Network tab. A deferred entangle will show no requests during input, whereas .live() will trigger an HTTP request on every keystroke. For high-frequency inputs, consider combining this with Alpine's .debounce modifier on the input element to limit the request volume while maintaining a responsive feel.