Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Laravel

Livewire x-on Events from Alpine

Trigger Livewire actions from Alpine.js x-on directives.

16 January 20261 min readLaravelاقرأ بالعربية

On this page

  1. Basic Event
  2. With Parameters
  3. Await Response
  4. Dispatch Event

Alpine to Livewire events:

Basic Event

blade
<div x-data @click="$wire.handleClick()">
    Click me
</div>

With Parameters

blade
<button x-data @click="$wire.delete({{ $id }})">
    Delete
</button>

Await Response

blade
<div x-data="{ result: null }">
    <button @click="result = await $wire.calculate()">
        Calculate
    </button>
    <span x-text="result"></span>
</div>

Dispatch Event

blade
<button @click="$dispatch('refresh-list')">
    Refresh
</button>
All articles

Keep reading

  • Laravel Action Classes Pattern16 January 20261 min read
  • Laravel Action Classes: Single Responsibility16 January 20261 min read
  • Laravel API Rate Limiting16 January 20261 min read