How to debounce input in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Debouncing input in Vue prevents excessive API calls and improves performance by delaying action execution until user input activity stops. With over 11 years of experience in software development and as the creator of CoreUI, I’ve implemented input debouncing extensively in search interfaces, live validation, and real-time data applications. From my expertise, the most effective approach is using Vue’s watch function with a debounce utility to delay reactive updates. This technique dramatically reduces server load while maintaining responsive user interactions.
Use Vue’s watch function with debounce to delay input processing until typing activity stops.
import { ref, watch } from 'vue'
export default {
setup() {
const searchQuery = ref('')
const searchResults = ref([])
let timeoutId = null
const debounce = (func, delay) => {
return (...args) => {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => func.apply(this, args), delay)
}
}
const performSearch = debounce(async (query) => {
if (query.length > 2) {
const response = await fetch(`/api/search?q=${query}`)
searchResults.value = await response.json()
}
}, 300)
watch(searchQuery, (newQuery) => {
performSearch(newQuery)
})
return { searchQuery, searchResults }
}
}
Here the debounce function creates a delayed execution wrapper that clears previous timeouts and sets new ones. The watch(searchQuery, ...) observes input changes and triggers the debounced search function. The search only executes after 300ms of inactivity, preventing API calls on every keystroke. This approach maintains responsiveness while significantly reducing network traffic during rapid typing.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for search inputs, live validation, and auto-save functionality. A 300ms delay provides good balance between responsiveness and performance - adjust based on your specific use case and network requirements.
