Alpine.js in Magento

What is Alpine.js?

Alpine.js is a lightweight JavaScript framework for adding interactivity to HTML.

Basic Syntax

<!-- x-data: Initialize component -->
<div x-data="{ count: 0 }">
    <button @click="count++">Count: <span x-text="count"></span></button>
</div>

Directives

Complete Example

<div x-data="{ items: [], newItem: '' }" x-init="items = await fetch('/api/items').then(r => r.json())">
    <input type="text" x-model="newItem">
    <button @click="items.push(newItem); newItem = ''">Add</button>
    
    <template x-for="item in items" :key="item">
        <div x-text="item"></div>
    </template>
</div>

Toggle Component

<div x-data="{ open: false }">
    <button @click="open = !open" x-text="open ? 'Close' : 'Open'">
    </button>
    
    <div x-show="open" x-transition>
        Toggle content
    </div>
</div>

Form Handling

<div x-data="{
    form: { email: '', password: '' },
    loading: false,
    async submit() {
        this.loading = true;
        await fetch('/login', {
            method: 'POST',
            body: JSON.stringify(this.form)
        });
        this.loading = false;
    }
}">
    <form @submit.prevent="submit">
        <input type="email" x-model="form.email">
        <input type="password" x-model="form.password">
        <button type="submit" :disabled="loading">
            <span x-show="!loading">Login</span>
            <span x-show="loading">Loading...</span>
        </button>
    </form>
</div>

Shopping Cart

<div x-data="{
    cart: [],
    get total() {
        return this.cart.reduce((sum, item) => sum + item.price * item.qty, 0);
    },
    add(product) {
        this.cart.push({...product, qty: 1});
    },
    remove(index) {
        this.cart.splice(index, 1);
    }
}">
    <div x-text="'Cart: ' + cart.length + ' items'"></div>
    <div x-text="'Total: $' + total.toFixed(2)"></div>
    
    <template x-for="(item, index) in cart" :key="index">
        <div>
            <span x-text="item.name"></span>
            <button @click="remove(index)">Remove</button>
        </div>
    </template>
</div>

Dropdown Component

<div x-data="{ open: false }" @click.away="open = false">
    <button @click="open = !open">
        Menu
        <svg x-show="open" class="rotate-180">...</svg>
    </button>
    
    <div x-show="open"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95">
        Menu items
    </div>
</div>

Modal Component

<div x-data="{ open: false }">
    <button @click="open = true">Open Modal</button>
    
    <div x-show="open" class="fixed inset-0 bg-black bg-opacity-50">
        <div class="bg-white rounded p-6 max-w-md mx-auto mt-20">
            <h2 class="text-xl font-bold">Modal Title</h2>
            <p>Modal content</p>
            <button @click="open = false">Close</button>
        </div>
    </div>
</div>

Tab Component

<div x-data="{ activeTab: 'tab1' }">
    <div class="flex border-b">
        <button @click="activeTab = 'tab1'"
                :class="activeTab === 'tab1' ? 'border-b-2 border-blue-500' : ''">
            Tab 1
        </button>
        <button @click="activeTab = 'tab2'"
                :class="activeTab === 'tab2' ? 'border-b-2 border-blue-500' : ''">
            Tab 2
        </button>
    </div>
    
    <div x-show="activeTab === 'tab1'">Content 1</div>
    <div x-show="activeTab === 'tab2'">Content 2</div>
</div>

KnockoutJS to Alpine.js

Migration Example

KnockoutJS

<div data-bind="scope: 'cart'">
    <span data-bind="text: items().length"></span>
    <button data-bind="click: addItem">Add</button>
</div>

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "component": "cart"
        }
    }
}
</script>

Alpine.js

<div x-data="{ items: [], addItem() { this.items.push({}) } }">
    <span x-text="items.length"></span>
    <button @click="addItem">Add</button>
</div>

Key Differences

• No build step: Alpine.js works directly in HTML
• No components: State lives in x-data
• Simpler syntax: Directives are intuitive
• Lighter weight: ~15KB vs 500KB+