How to pass livewire entanglement into Alpine component

Question

I have a modal component which uses Alpine, which I made into a Blade component.

// Modal blade component
<div x-data="{ open = false }">
  <div x-show="open"></div>
</div>

I want to share the open state with a Livewire component, but I don't know how to pass the @entangle directive through the component:

// Livewire component
<x-modal>
</x-modal>

---

I tried this:

// Modal Blade component
<div {{ $attributes }}>
  <div x-show="open"></div>
</div>

// Livewire component
<div x-data="{ open = @entangle('livewire-state')}">
  <div x-show="open"></div>
</div>

But the entangle directive just get parsed into string.

Answer 1

Your x-data object isn't properly syntaxed. You are using a = instead of a :. You should be seeing a console error also, if you happened to have the console open. Use the following syntax:

<div x-data="{ open: @entangle('livewire-state')}">

Read more on @entangle in the docs.