Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue3-debounce-input

dhaneshmane16MIT1.0.2

Debounce utility for Vue 3, A simple and lightweight Vue3 hook for debouncing values. Ideal for optimizing performance in search fields, input handling, and other scenarios where you want to limit the rate of updates.

vue, debounce, hook, hooks, vue-hooks, vue-hook, performance, utility, useDebounce, debounce-hook, vue-utils, vue-debounce, debounce-for-vue, vue3-debounce-input, simple-debounce, vue3, vue3-debounce, vue3-debounce-input

readme

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

`javascript <template>

<input v-model="inputText" @input="handleInput" placeholder="Type something..." />

Waiting...

Debounced Value: {{ inputText }}

</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>

<input v-model="inputText" @input="handleInput" placeholder="Type something..." />

Waiting...

Debounced Value: {{ inputText }}

</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>