AlpineJS

AlpineJS permite añadir interactividad a una página usando atributos HTML. Es útil cuando necesitas comportamiento sencillo sin montar una aplicación completa con React, Vue o Svelte.

Idea clave

Para usar cualquier directiva de Alpine necesitas declarar un scope con x-data, aunque no necesites estado.

<button x-data @click="alert('Hello')">
  Show message
</button>

Si el componente necesita estado, x-data puede recibir un objeto:

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">Content</div>
</div>

Cuándo encaja

• Pequeñas interacciones en HTML renderizado por servidor.
• WordPress, Laravel, Blade, Twig o templates tradicionales.
• Componentes sencillos: dropdowns, modales, tabs, accordions.

Cuándo no encaja

• Aplicaciones con mucho estado cliente.
• UIs complejas con routing y datos remotos.
• Casos donde ya existe una aplicación React/Vue completa.

Relacionado

• Livewire
• Wordpress