Installation of Alpine.js
Installation using CDN Link
This is simplest and easiest way to include Alpine.js in your script. This is ideal for small projects or experimental projects.
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
Installation Using npm
If you’re using npm for package management, you can install Alpine.js as a dependency:
npm install alpinejs
This integrates Alpine.js with your project’s dependencies and allows you to import it in your JavaScript files:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Example: We will see how easily we search an element from the list using alpine.js.
HTML
<!-- Autor: Pankaj Kumar Bind --><!DOCTYPE html><html lang="en"><head> <title>w3wiki</title> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js"></script></head><body style="background-color: rgb(187, 202, 187);"> <h1 style="color: green;">List of Geeks</h1> <div x-data="{ search: '', items: ['Pankaj', 'Shravan', 'Ram', 'Jeetu', 'Gaurav'], get filteredItems() { return this.items.filter( i => i.toLowerCase(). startsWith(this.search.toLowerCase()) ); } }"> <input x-model="search" placeholder="Search..."> <ul> <template x-for="item in filteredItems" :key="item"> <li x-text="item"></li> </template> </ul> </div></body></html> |
Output:
output