Alpine.js
Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.
Installation
In order to install Alpine you have to run this command:
npm install alpinejs
Then in your Javascript file you have to initialize it:
import Alpine from 'alpinejs' Alpine.start()
In order to learn Alpine and its basics their documentation is a great start. Below is a sample demo for a dropdown component:
<div x-data="{ open: false }"> <button @click="open = ! open">Toggle</button> <div x-show="open" @click.outside="open = false">Contents...</div></div>
Also below is a 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>