The hold directive enables you to add a hold action to an element, triggering it when the button is held down.

First, you need to install the package via npm or yarn.

1yarn add @wireui/alpinejs-hold-directive
2 
3or
4 
5npm i @wireui/alpinejs-hold-directive --save

Next, you need to register the directive with Alpine.js.

 1// resources/js/app.js
 2import Alpine from 'alpinejs'
 3 
 4+ import HoldDirective from '@wireui/alpinejs-hold-directive'
 5+ HoldDirective.register(Alpine)
 6 
 7// or
 8 
 9+ import { directive } from '@wireui/alpinejs-hold-directive'
10+ Alpine.directive('hold', directive)
11 
12window.Alpine = Alpine
13 
14Alpine.start()

You can use the x-hold directive to call any alpine.js action.

 1<div class="flex items-center gap-x-3" x-data="{
 2    count: 0,
 3    plus() { this.count++ },
 4    minus() { this.count-- }
 5}">
 6    <x-button x-hold.click="minus" icon="minus" />
 7 
 8    <span class="bg-teal-600 text-white px-5 py-1.5 rounded-lg" x-text="count"></span>
 9 
10    <x-button x-hold.click="plus" icon="plus" />
11</div>

All modifiers can be used together. Just set the modifier duration after the modifer name, x-hold.delay.500ms .