On gists

Alpine.js tricks

Alpine.js

tricks.html Raw #

<!-- 1. Automatic init function calls -->
<div x-data="{
    init() {
        console.log('Here we go!')
    }
}"></div>

<!-- 2. Clean up after yourself with destroy -->
<div x-data="{
    init() {
        carouselLibrary.create();
    },
    destroy() {
        carouselLibrary.delete();
    }
}"></div>

<!-- 3. Interact with global stores from external JavaScript -->
Alpine.store('counter', {
    count: 0
})
// In a different file or area.
Alpine.store('counter').count += 1

<!-- 4. Independent x-init directives -->
<div x-data>
    <p x-init="console.log('I am ready!')"></p>
</div>

<img src="..." x-init="doSomeMagicHere()">


<!-- 5. Unfurl / unwrap Proxy with Alpine.raw -->
<div x-data="{ user: { name: 'Ryan' } }" x-init="console.log(user)">
    <!-- This produces a `Proxy` in the console -->
</div>

<div x-data="{ user: { name: 'Ryan' } }" x-init="console.log(Alpine.raw(user))">
    <!-- This produces the "real" `user` object in the console -->
</div>