Example — Alpine UI patterns

Patterns that combine Brew’s bundled Alpine with server components.

Dropdown + server action

<div x-data="{ open: false }">
  <button type="button" @click="open = ! open">Account</button>
  <div x-show="open" @click.outside="open = false" x-cloak>
    <button type="button" wire:click="logout">Log out</button>
  </div>
</div>

Call the server from Alpine

<div x-data>
  <button
    type="button"
    @click="
      const n = await $wire.doubled();
      alert(n);
    "
  >Double count</button>
</div>

fun doubled(): Int = count * 2

Entangle a field

<div x-data="{ local: @entangle('query').live }">
  <input x-model="local" placeholder="Search…" />
  <p x-text="'Local: ' + local"></p>
</div>

Listen for Brew events in Alpine

fun save() {
    dispatch("post-saved", mapOf("id" to id))
}

<div
  x-data
  x-on:post-saved.window="console.log($event.detail)"
>
  <button type="button" wire:click="save">Save</button>
</div>

Custom control with x-modelable

<div x-data="{ value: '' }" x-modelable="value" wire:model="title">
  <input x-model="value" />
</div>

Brew’s wire:model binds through Alpine’s modelable surface — see Forms.

Register a hook before start

<script>
  document.addEventListener('brew:init', () => {
    Brew.hook('commit', ({ component }) => {
      console.debug('commit', component.name)
    })
  })
</script>
@brewScripts

Deep dive: Alpine.js coupling.