useStopwatch

Stopwatch counting up from zero. The elapsed time is recomputed from timestamps on every tick, so it does not accumulate interval drift while running. Pausing holds the elapsed time; resuming continues from where it stopped.

Demo

source

0

Years

0

Months

0

Days

0

Hours

0

Minutes

0

Seconds

0

Milliseconds

Usage

<script setup>
import { useStopwatch } from "vue-countdown-composable";

const { minutes, seconds, isRunning, start, pause, resume, stop } =
  useStopwatch();
</script>

<template>
  <div>{{ minutes }}m {{ seconds }}s</div>
  <button @click="start(100)">start</button>
</template>

API

Returned values

All values are read-only and reactive.

Name	Type	Description
milliseconds	ComputedRef<number>	Elapsed milliseconds (0–999)
seconds	ComputedRef<number>	Elapsed seconds (0–59)
minutes	ComputedRef<number>	Elapsed minutes (0–59)
hours	ComputedRef<number>	Elapsed hours (0–23)
days	ComputedRef<number>	Elapsed days (0–29)
months	ComputedRef<number>	Elapsed months (0–11), approximated as 30 days
years	ComputedRef<number>	Elapsed years, approximated as 12 × 30-day months
isRunning	Readonly<Ref<boolean>>	Whether the stopwatch is currently ticking

Methods

Name	Signature	Description
start	(updateInterval?: number) => void	Start from zero, updating every updateInterval ms (default 1000; invalid values warn and fall back). Calling it again restarts from zero.
pause	() => void	Pause the stopwatch, holding the elapsed time.
resume	() => void	Resume a paused stopwatch from the held elapsed time. No-op if already running or stopped.
stop	() => void	Stop and reset the elapsed time to zero. A stopped stopwatch cannot be resumed — call start again.

Cleanup

The interval is cleared automatically when the owning component (or effectScope) is disposed — no manual cleanup needed.