Vue

<script setup lang="ts">
import { useIntentClick, vIntentClick } from 'intent-click/vue';

// Composable
const handleClick = (event: PointerEvent) => {
    console.log('Intent click at', event.clientX, event.clientY);
};

const options = {
    threshold: 'auto',
    onLongPress: (event: PointerEvent) => {
        console.log('Long press detected');
    },
};

const buttonRef = useIntentClick<HTMLButtonElement>(handleClick, options);
</script>

<template>
    <button ref="buttonRef">Delete Account</button>
</template>

Directive

<script setup lang="ts">
import { vIntentClick } from 'intent-click/vue';
</script>

<template>
    <button
        v-intent-click="{
            callback: handleClick,
            options: { threshold: 'auto' }
        }"
    >
        Delete Account
    </button>
</template>

Options

Same as React. See React documentation.

Important Notes

Options Changes

Options are read once during onMounted. Changing options prop after mount does not recreate the store in v1.