From jQuery to Alpine.js

Real quick, what is Alpine.js?

Alpine.js is a minimal framework for composing JavaScript behavior in your markup. It offers a declarative syntax for defining behavior directly in your HTML, and it’s a great way to simplify your JavaScript code.

Starting simple

A mobile menu with a hamburger button

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle Menu</button>
  <ul x-show="open">
	<!-- Your menu items here -->
  </ul>
</div>

A counter

Alpine’s x-data directive allows you to define the state you want to keep track of in your component.

<div x-data="{ count: 0 }">
    <button @click="count++">Click me</button>
 
    <span x-text="'Times clicked: ' + count"></span>
</div>

Easy peasy modals

<div x-data="{ open: false }">
  <!-- Modal trigger-->
  <button @click="open = true">Open Modal</button>

  <!-- Modal outer container-->
  <div x-show="open">

	<!-- Modal inner container - if you click outside, the modal will closes-->
	<div @click.away="open = false" class="fixed inset-0 bg-black/50 flex items-center justify-center">
	  <div class="bg-white p-4 rounded">
		<p>Click outside the modal to close it</p>
		<button @click="open = false">Close</button>
	  </div>
	</div>
  </div>
</div>