Premium
Vue Debounced Search with Fake API
Challenge summary
Implement a Vue 3 debounced search input that calls a fake API. Use a watcher with a timeout, cancel stale calls, and manage loading/error/empty states.
What you'll practice
- Render a search input as the main UI.
- Call a provided fake API function that returns a filtered list of users.
- Show a loading message while the debounced request is in-flight.
- Show a friendly error message when the fake API rejects.
- Show result rows with user name and email on success.
What Premium unlocks
Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.
Free related practice
Upgrade to FrontendAtlas Premium to unlock this challenge. Already upgraded? Sign in to continue.