Debounced API Calls in Vue 3 with VueUse

Avoid unnecessary API calls while users type by using a debounce.

How It Works:

useDebounce delays the execution of a reactive value update, reducing load on the backend.

Code Example:

<script setup>
import { ref, watch } from 'vue'
import { useDebounce } from '@vueuse/core'

const search = ref('')
const debounced = useDebounce(search, 500)

watch(debounced, (value) => {
  console.log('Search for:', value) // Trigger API call here
})
</script>

<template>
  <input v-model="search" placeholder="Type to search..." />
</template>

Why Use It:

• Prevents API spamming while typing.
• Enhances performance and user experience.