1---
2category: Animation
3---
4 
5# useNow
6 
7Reactive current Date instance.
8 
9## Usage
10 
11```ts
12import { useNow } from '@vueuse/core'
13 
14const now = useNow()
15```
16 
17```ts
18import { useNow } from '@vueuse/core'
19// ---cut---
20const { now, pause, resume } = useNow({ controls: true })
21```
22 
23## Component Usage
24 
25```vue
26<template>
27  <UseNow v-slot="{ now, pause, resume }">
28    Now: {{ now }}
29    <button @click="pause()">
30      Pause
31    </button>
32    <button @click="resume()">
33      Resume
34    </button>
35  </UseNow>
36</template>
37```
38 
39## Type Declarations
40 
41```ts
42export interface UseNowOptions<
43  Controls extends boolean,
44> extends ConfigurableScheduler {
45  /**
46   * Expose more controls
47   *
48   * @default false
49   */
50  controls?: Controls
51  /**
52   * Start the clock immediately
53   *
54   * @deprecated Please use `scheduler` option instead
55   * @default true
56   */
57  immediate?: boolean
58  /**
59   * Update interval in milliseconds, or use requestAnimationFrame
60   *
61   * @deprecated Please use `scheduler` option instead
62   * @default requestAnimationFrame
63   */
64  interval?: "requestAnimationFrame" | number
65}
66export type UseNowReturn<Controls extends boolean> = Controls extends true
67  ? {
68      now: Ref<Date>
69    } & Pausable
70  : Ref<Date>
71/**
72 * Reactive current Date instance.
73 *
74 * @see https://vueuse.org/useNow
75 * @param options
76 *
77 * @__NO_SIDE_EFFECTS__
78 */
79export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
80export declare function useNow(options: UseNowOptions<true>): {
81  now: Ref<Date>
82} & Pausable
83```
84