4a3ce4cc1d
Add comprehensive reference documentation for: - Vitest: environments, projects/workspaces, type testing, vi utilities - Pinia: HMR, Nuxt integration, SSR setup - Vue: built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
1.5 KiB
1.5 KiB
category
| category |
|---|
| Animation |
useNow
Reactive current Date instance.
Usage
import { useNow } from '@vueuse/core'
const now = useNow()
import { useNow } from '@vueuse/core'
// ---cut---
const { now, pause, resume } = useNow({ controls: true })
Component Usage
<template>
<UseNow v-slot="{ now, pause, resume }">
Now: {{ now }}
<button @click="pause()">
Pause
</button>
<button @click="resume()">
Resume
</button>
</UseNow>
</template>
Type Declarations
export interface UseNowOptions<
Controls extends boolean,
> extends ConfigurableScheduler {
/**
* Expose more controls
*
* @default false
*/
controls?: Controls
/**
* Start the clock immediately
*
* @deprecated Please use `scheduler` option instead
* @default true
*/
immediate?: boolean
/**
* Update interval in milliseconds, or use requestAnimationFrame
*
* @deprecated Please use `scheduler` option instead
* @default requestAnimationFrame
*/
interval?: "requestAnimationFrame" | number
}
export type UseNowReturn<Controls extends boolean> = Controls extends true
? {
now: Ref<Date>
} & Pausable
: Ref<Date>
/**
* Reactive current Date instance.
*
* @see https://vueuse.org/useNow
* @param options
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
export declare function useNow(options: UseNowOptions<true>): {
now: Ref<Date>
} & Pausable