Alpine.bind()

Register reusable directive bundles.

What is Alpine.bind()?

Alpine.bind() lets you define a set of directives (and even data) that can be applied to any element using x-bind="name". It's perfect for extracting common UI patterns like dialogs, tooltips, or dropdown menus.

When to Use

Use Alpine.bind() when you find yourself repeating the same combination of x-data, @keydown, or other directives across multiple elements. It keeps your HTML clean and your logic DRY.

Defining a Bind

Alpine.bind('dialog', {
  'x-data'() { return { open: false } },
  '@keydown.escape'() { this.open = false }
})

Applying a Bind

<div x-bind="dialog">
  <button @click="open = true">Open Dialog</button>
  <div x-show="open">
    <p>Dialog content</p>
    <button @click="open = false">Close</button>
  </div>
</div>

Overriding Bound Directives

Directives you add directly on the element will override those from the bind. This allows you to customise individual instances while reusing the base pattern.