Skip to content

Alpine.js how to bind to DOM events with dots in the name

Using Alpine.js version 2.7.3, a component can listen to DOM events using x-on:[event].[modifiers].

But what syntax is used to listen to event names that have dots, like bootstrap’s show.bs.modal?

In Vue.js, this can be done by a custom directive (from this question), but I think custom directives can not be created in Alpine.js

Answer

It’s not possible at the moment since Alpine.js uses dots (.) to denote directive modifiers.