useTimestamp

Demo

Timestamp: 1787193481716

Usage

import { useTimestamp
 } from '@vueuse/core'

const timestamp
 = useTimestamp
({ offset
: 0 })

TypeScript

const { timestamp
, pause
, resume
 } = useTimestamp
({ controls
: true })

'use strict'
const { timestamp, pause, resume } = useTimestamp({ controls: true })

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue

<template>
  <UseTimestamp v-slot="{ timestamp
, pause
, resume
 }">
    Current Time: {{ timestamp
 }}
    <button
 @click
="pause
()">
      Pause
    </button
>
    <button
 @click
="resume
()">
      Resume
    </button
>
  </UseTimestamp>
</template>

Type Declarations

export interface UseTimestampOptions
<
  Controls
 extends boolean,
> extends ConfigurableScheduler {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls
?: Controls

  /**
   * Offset value adding to the value
   *
   * @default 0
   */
  offset
?: number
  /**
   * Callback on each update
   */
  callback
?: (timestamp
: number) => void
}
export type UseTimestampReturn
<Controls
 extends boolean> = Controls
 extends true
  ? {
      timestamp
: ShallowRef
<number>
    } & Pausable

  : ShallowRef
<number>
/**
 * Reactive current timestamp.
 *
 * @see https://vueuse.org/useTimestamp
 * @param options
 */
export declare function useTimestamp
(
  options
?: UseTimestampOptions
<false>,
): ShallowRef
<number>
export declare function useTimestamp
(options
: UseTimestampOptions
<true>): {
  timestamp
: ShallowRef
<number>
} & Pausable