useNow
Reactive current Date instance.
Demo
Now: Sat Mar 05 2022 07:29:39 GMT+0000 (Coordinated Universal Time)
Usage
import { useNow } from '@vueuse/core'
const now = useNow()
import { useNow } from '@vueuse/core'
const now = useNow()
const { now, pause, resume } = useNow({ controls: true })
const { now, pause, resume } = useNow({ controls: true })
Component
This function also provides a renderless component version via the@vueuse/components package. Learn more about the usage. <UseNow v-slot="{ now, pause, resume }">
Now: {{ now }}
<button @click="pause()">Pause</button>
<button @click="resume()">Resume</button>
</UseNow>
<UseNow v-slot="{ now, pause, resume }">
Now: {{ now }}
<button @click="pause()">Pause</button>
<button @click="resume()">Resume</button>
</UseNow>
Type Declarations
export interface UseNowOptions<Controls extends boolean> {
/**
* Expose more controls
*
* @default false
*/
controls?: Controls
/**
* Update interval, or use requestAnimationFrame
*
* @default requestAnimationFrame
*/
interval?: "requestAnimationFrame" | number
}
/**
* Reactive current Date instance.
*
* @see https://vueuse.org/useNow
* @param options
*/
export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
export declare function useNow(options: UseNowOptions<true>): {
now: Ref<Date>
} & Pausable
export declare type UseNowReturn = ReturnType<typeof useNow>
export interface UseNowOptions<Controls extends boolean> {
/**
* Expose more controls
*
* @default false
*/
controls?: Controls
/**
* Update interval, or use requestAnimationFrame
*
* @default requestAnimationFrame
*/
interval?: "requestAnimationFrame" | number
}
/**
* Reactive current Date instance.
*
* @see https://vueuse.org/useNow
* @param options
*/
export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
export declare function useNow(options: UseNowOptions<true>): {
now: Ref<Date>
} & Pausable
export declare type UseNowReturn = ReturnType<typeof useNow>
Source
Contributors
Anthony Fu
Shinigami
wheat
Alex Kozack
Antério Vieira