Alpine Data
const dropdown = () => ({ open: false, toggle() { this.open = !this.open },})export default dropdown
Import it into app.ts
import dropdown from './ts/dropdown'Alpine.data('dropdown', dropdown)
In any HTML file
<div x-data="dropdown"> <button @click="toggle"> Open </button> <div x-show="open"> About </div></div>
Alpine Store
const itemStore = { items: [] as Item[], add(item: Item) { // }, remove(id: number) { // },}export default itemStore
Import it into app.ts
import itemStore from './ts/item-store'Alpine.store('itemStore', itemStore)
In any HTML file
<div x-data> <ul> <template x-for="item in $store.itemStore.items" :key="item.id"> <li x-text="item.text"></li> </template> </ul></div>
Table of Contents