General
- Alpine Overview
- Loading Alpine by ES Module
- Building Modular App with Alpine
- Installing Alpine by NPM
Directive
x-data
x-init
- Using x-init to Initialize x-data
- Using x-init to Set Focus
- Using x-init to Fetch Data from API
- Using x-init with $nextTick
- Using init() without x-init
x-model
- Using x-model with Textbox
- Using x-model with Checkbox
- Using x-model with Textarea
- Using x-model with lazy Modifier
- Using x-model with number Modifier
- Using x-model with debounce Modifier
x-for
- Using x-for to Create Elements by Loop
- Using x-for with Key
- Using x-for with Index
- Using x-for with Range
Misc
- Using x-show to Display Tabs
- [Using x-bind for Class Binding](/alpine/directive/
x-bind/class) - Using x-html to bind HTML
- Using x-transition to Support CSS Transition
- Using x-effect to Simulate x-html
- Using x-ref to Set a Name for the Element
- Using x-cloak to Prevent Page Flicker
- Using x-teleport to Control Element outside of x-data Block
Magic
- Using $el to Access the Current Element
- Using $refs to Access the Element
- Using $nextTick to Execute Expression after DOM Updates
Plugin
Component
- Creating Responsive Fixed Navbar
- Creating Responsive Auto-hidden Navbar
- Creating Search Autocomplete