useTimer
A reactive timer composable with pause/resume support and remaining time tracking.
Usage
The useTimer composable creates a controllable timer that fires a handler after a specified duration. It supports pause/resume, repeating intervals, and reactive remaining time tracking.
import { useTimer } from '@vuetify/v0'
const timer = useTimer(() => {
console.log('Timer fired!')
}, { duration: 5000 })
// Control the timer
timer.start()
timer.pause()
timer.resume()
timer.stop()
// Reactive state
timer.remaining.value // ms left until next fire
timer.isActive.value // true when started (even if paused)
timer.isPaused.value // true when pausedReplaces debounce useTimer replaces the deprecated debounce utility. It provides the same delay behavior with pause/resume, repeat support, and automatic cleanup on scope disposal.
Architecture
The timer tracks three internal values: startedAt (timestamp when the current run began), budget (remaining ms for the current run), and duration (the original interval). On pause, budget is reduced by elapsed time. On resume, a new setTimeout is created with the remaining budget.
Reactivity
| Property | Type | Description |
|---|---|---|
remaining | ShallowRef<number> | Milliseconds until next fire, updated ~100ms |
isActive | ShallowRef<boolean> | true after start(), false after stop() or one-shot fires |
isPaused | ShallowRef<boolean> | true after pause(), false after resume() or stop() |
Examples
Hover a toast to pause its countdown
Recipes
Key Features
One-Shot vs Repeating
By default, the timer fires once and stops. Set repeat: true for an interval that restarts after each fire:
// One-shot (default) — fires once, then isActive becomes false
const delay = useTimer(() => save(), { duration: 3000 })
// Repeating — fires every 5 seconds until stopped
const poll = useTimer(() => refresh(), { duration: 5000, repeat: true })Pause and Resume
Pause preserves the remaining time. Resume continues from where it left off:
const timer = useTimer(handler, { duration: 10_000 })
timer.start()
// After 3 seconds...
timer.pause()
// remaining.value ≈ 7000
// Later...
timer.resume()
// fires after ~7 more secondsRestart Behavior
Calling start() while already running restarts from full duration:
timer.start() // starts 5s countdown
// 2 seconds later...
timer.start() // restarts — fires in 5s, not 3sAutomatic Cleanup
The timer clears on scope disposal — no manual cleanup needed:
// Timer automatically stops when component unmounts
const timer = useTimer(handler, { duration: 1000 })FAQ
useTimer is a setTimeout-based delay or interval with pause/resume and remaining-time tracking — reach for it for user-facing delays like auto-dismiss or cooldowns. useRaf throttles a callback to animation frames, for per-frame work like scroll or animation updates.
No. pause() captures the remaining budget and resume() continues from exactly where it left off, not from the full duration.
It restarts from the full duration. A timer started for 5s that you start() again after 2s will fire 5s later, not 3s.
Pass repeat: true. By default the timer is one-shot — it fires once and isActive becomes false; with repeat it restarts after each fire until you call stop().
useTimer did. It provides the same delay behavior plus pause/resume, repeat support, and automatic cleanup on scope disposal.