1---
2category: Time
3---
4 
5# useCountdown
6 
7Reactive countdown timer in seconds.
8 
9## Usage
10 
11```ts
12import { useCountdown } from '@vueuse/core'
13 
14const countdownSeconds = 5
15const { remaining, start, stop, pause, resume } = useCountdown(countdownSeconds, {
16  onComplete() {
17 
18  },
19  onTick() {
20 
21  }
22})
23```
24 
25You can use a `ref` to change the initial countdown.
26`start()` and `resume()` also accept a new countdown value for the next countdown.
27 
28```ts
29import { useCountdown } from '@vueuse/core'
30import { shallowRef } from 'vue'
31 
32const countdown = shallowRef(5)
33const { start, reset } = useCountdown(countdown, {
34})
35 
36// change the countdown value
37countdown.value = 10
38 
39// start a new countdown with 2 seconds
40start(2)
41 
42// reset the countdown to 4, but do not start it
43reset(4)
44 
45// start the countdown with the current value of `countdown`
46start()
47```
48 
49## Type Declarations
50 
51```ts
52export interface UseCountdownOptions extends ConfigurableScheduler {
53  /**
54   *  Interval for the countdown in milliseconds. Default is 1000ms.
55   *
56   * @deprecated Please use `scheduler` option instead
57   */
58  interval?: MaybeRefOrGetter<number>
59  /**
60   * Callback function called when the countdown reaches 0.
61   */
62  onComplete?: () => void
63  /**
64   * Callback function called on each tick of the countdown.
65   */
66  onTick?: () => void
67  /**
68   * Start the countdown immediately
69   *
70   * @deprecated Please use `scheduler` option instead
71   * @default false
72   */
73  immediate?: boolean
74}
75export interface UseCountdownReturn extends Pausable {
76  /**
77   * Current countdown value.
78   */
79  remaining: ShallowRef<number>
80  /**
81   * Resets the countdown and repeatsLeft to their initial values.
82   */
83  reset: (countdown?: MaybeRefOrGetter<number>) => void
84  /**
85   * Stops the countdown and resets its state.
86   */
87  stop: () => void
88  /**
89   * Reset the countdown and start it again.
90   */
91  start: (countdown?: MaybeRefOrGetter<number>) => void
92}
93/**
94 * Reactive countdown timer in seconds.
95 *
96 * @param initialCountdown
97 * @param options
98 *
99 * @see https://vueuse.org/useCountdown
100 */
101export declare function useCountdown(
102  initialCountdown: MaybeRefOrGetter<number>,
103  options?: UseCountdownOptions,
104): UseCountdownReturn
105```
106