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