AlpineJS offers the reactivity of Vue with the simplicity of jQuery, making it an ideal tool for developers who want interactivity without the overhead of a full JavaScript framework.
Why AlpineJS?
- Ultra-lightweight (under 10KB gzipped)
- Ideal for Laravel + Blade + Livewire
- Minimal setup, instant results
Getting Started
Include Alpine via CDN:
<script src="https://cdn.jsdelivr.net/npm/alpinejs" defer></script>Build a Toggle Menu
<div x-data="{ open: false }">
<button @click="open = !open">Toggle Menu</button>
<div x-show="open">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>Reactive Form Input
<div x-data="{ name: '' }">
<input type="text" x-model="name" />
<p>Hello, <span x-text="name"></span></p>
</div>Tab Component
<div x-data="{ tab: 'first' }">
<button @click="tab = 'first'">Tab 1</button>
<button @click="tab = 'second'">Tab 2</button>
<div x-show="tab === 'first'">First tab content</div>
<div x-show="tab === 'second'">Second tab content</div>
</div>x-transition for Animations
Alpine has built-in transitions:
<div x-show="open" x-transition>Fades in/out</div>Alpine + Livewire
Use Alpine to enhance Livewire components:
<div x-data="{ count: @entangle('count') }">
<button @click="count++">+</button>
<span x-text="count"></span>
</div>AlpineJS is perfect for developers who love simplicity but need interactivity. Whether you’re building a Laravel app or just adding a dynamic menu to a static page, AlpineJS gets the job done fast, clean, and with almost zero configuration.