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:
Contact Us