Jump to content

Draft:Alpine.js

From Wikipedia, the free encyclopedia
This is the current revision of this page, as edited by Significa liberdade (talk | contribs) at 01:27, 25 March 2025 (Declining submission: nn - Submission is about a topic not yet shown to meet general notability guidelines (be more specific if possible) (AFCH)). The present address (URL) is a permanent link to this version.
(diff) ← Previous revision | Latest revision (diff) | Newer revision → (diff)

Alpine.js is JavaScript framework for working with user interface. Alpine.js is easy-to-learn framework and him often compare with Vue.js and react, but they more harder than Alpine.js. With Alpine.js you easily handle events and work with DOM without manual updating it. First version was released in 2019.

Name Alpine.js
Type JavaScript framework
Developer Caleb Porzio
First version 2019
Latest version March 12, 2025; v3.14.9
License MIT
Usage Dynamic interaction with DOM, minimal alternative Vue.js

Code examples

[edit]

Easy counter on Alpine.js:

<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>

Simple search input:

<div
    x-data="{
        search: '',
 
        items: ['foo', 'bar', 'baz'],
 
        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>
    <input x-model="search" placeholder="Search...">
 
    <ul>
        <template x-for="item in filteredItems" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

References

[edit]
[edit]