vue3-debounce-input

A simple Vue3 hook for debouncing an input with state variables in Vue 3.

Installation

npm i vue3-debounce-input

Options

The useDebounce composable accepts the following options:

1. leading (default: false): If true, the debounced function will be executed at the start of the interval.
2. trailing (default: true): If true, the debounced function will be executed at the end of the interval.
3. immediate (default: false): If true, the function will execute immediately on the first call.
4. cancel: You can call the cancel method to cancel any pending debounced calls.

Basic Usage

Live demo

<template>
  <div>
    <input 
      v-model="inputText" 
      @input="handleInput" 
      placeholder="Type something..."
    />
    <p v-if="isDebouncing">Waiting...</p>
    <p>Debounced Value: {{ inputText }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useDebounce } from 'vue3-debounce-input'; // Import the composable

export default {
  setup() {
    const inputText = ref('');
    const { triggerDebouncedFn, isDebouncing } = useDebounce((value) => {
      console.log('Debounced value:', value); // Handle the debounced value here (e.g., API call)
    }, 500); // Debounce delay in milliseconds

    const handleInput = () => {
      
      triggerDebouncedFn(inputText.value); 
    };

    return {
      inputText,
      handleInput,
      isDebouncing,
    };
  },
};
</script>

## Advanced Usage (Custom Options)

You can customize the behavior of the debounce function using options:

```javascript
<template>
  <div>
    <input 
      v-model="inputText" 
      @input="handleInput" 
      placeholder="Type something..."
    />
    <p v-if="isDebouncing">Waiting...</p>
    <p>Debounced Value: {{ inputText }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useDebounce } from 'debounce-for-vue'; // Import the composable

export default {
  setup() {
    const inputText = ref('');
    
    // Custom debounce options
    const { triggerDebouncedFn, isDebouncing, cancel } = useDebounce((value) => {
      console.log('Debounced value:', value); // Handle the debounced value here (e.g., API call)
    }, 500, { leading: true, trailing: true, immediate: false }); // Custom options

    const handleInput = () => {
      triggerDebouncedFn(inputText.value); // Trigger the debounced function
    };

    return {
      inputText,
      handleInput,
      isDebouncing,
      cancel,
    };
  },
};
</script>