Skip to content
On this page

useTimeAgo

Category
Last Changed
3 months ago

Reactive time ago.

Demo

just now
0ms

Usage

import { useTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2021, 0, 1))
import { useTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2021, 0, 1))

Component

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.
<UseTimeAgo v-slot="{ timeAgo }" :time="new Date(2021, 0, 1)">
  Time Ago: {{ timeAgo }}
</UseTimeAgo>
<UseTimeAgo v-slot="{ timeAgo }" :time="new Date(2021, 0, 1)">
  Time Ago: {{ timeAgo }}
</UseTimeAgo>

Type Declarations

Show Type Declarations
export declare type UseTimeAgoFormatter<T = number> = (
  value: T,
  isPast: boolean
) => string
export interface UseTimeAgoMessages {
  justNow: string
  past: string | UseTimeAgoFormatter<string>
  future: string | UseTimeAgoFormatter<string>
  year: string | UseTimeAgoFormatter<number>
  month: string | UseTimeAgoFormatter<number>
  day: string | UseTimeAgoFormatter<number>
  week: string | UseTimeAgoFormatter<number>
  hour: string | UseTimeAgoFormatter<number>
  minute: string | UseTimeAgoFormatter<number>
  second: string | UseTimeAgoFormatter<number>
}
export interface UseTimeAgoOptions<Controls extends boolean> {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls?: Controls
  /**
   * Intervals to update, set 0 to disable auto update
   *
   * @default 30_000
   */
  updateInterval?: number
  /**
   * Maximum unit (of diff in milliseconds) to display the full date instead of relative
   *
   * @default undefined
   */
  max?:
    | "second"
    | "minute"
    | "hour"
    | "day"
    | "week"
    | "month"
    | "year"
    | number
  /**
   * Formatter for full date
   */
  fullDateFormatter?: (date: Date) => string
  /**
   * Messages for formating the string
   */
  messages?: UseTimeAgoMessages
}
/**
 * Reactive time ago formatter.
 *
 * @see https://vueuse.org/useTimeAgo
 * @param options
 */
export declare function useTimeAgo(
  time: MaybeRef<Date | number | string>,
  options?: UseTimeAgoOptions<false>
): ComputedRef<string>
export declare function useTimeAgo(
  time: MaybeRef<Date | number | string>,
  options: UseTimeAgoOptions<true>
): {
  timeAgo: ComputedRef<string>
} & Pausable
export declare type UseTimeAgoFormatter<T = number> = (
  value: T,
  isPast: boolean
) => string
export interface UseTimeAgoMessages {
  justNow: string
  past: string | UseTimeAgoFormatter<string>
  future: string | UseTimeAgoFormatter<string>
  year: string | UseTimeAgoFormatter<number>
  month: string | UseTimeAgoFormatter<number>
  day: string | UseTimeAgoFormatter<number>
  week: string | UseTimeAgoFormatter<number>
  hour: string | UseTimeAgoFormatter<number>
  minute: string | UseTimeAgoFormatter<number>
  second: string | UseTimeAgoFormatter<number>
}
export interface UseTimeAgoOptions<Controls extends boolean> {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls?: Controls
  /**
   * Intervals to update, set 0 to disable auto update
   *
   * @default 30_000
   */
  updateInterval?: number
  /**
   * Maximum unit (of diff in milliseconds) to display the full date instead of relative
   *
   * @default undefined
   */
  max?:
    | "second"
    | "minute"
    | "hour"
    | "day"
    | "week"
    | "month"
    | "year"
    | number
  /**
   * Formatter for full date
   */
  fullDateFormatter?: (date: Date) => string
  /**
   * Messages for formating the string
   */
  messages?: UseTimeAgoMessages
}
/**
 * Reactive time ago formatter.
 *
 * @see https://vueuse.org/useTimeAgo
 * @param options
 */
export declare function useTimeAgo(
  time: MaybeRef<Date | number | string>,
  options?: UseTimeAgoOptions<false>
): ComputedRef<string>
export declare function useTimeAgo(
  time: MaybeRef<Date | number | string>,
  options: UseTimeAgoOptions<true>
): {
  timeAgo: ComputedRef<string>
} & Pausable

Source

SourceDemoDocs

Contributors

Anthony Fu
wheat
Alex Kozack

Changelog

v5.0.0-beta.2 on 5/25/2021
5bede - feat: introduce components & directives (#486)
v4.9.3 on 5/11/2021
0fff6 - feat!: introduce controls option
v4.3.6 on 3/12/2021
9ba93 - fix: seconds max
v4.3.3 on 3/5/2021
bf5b8 - feat: accept string as time
v4.3.2 on 3/5/2021
4d615 - feat: new function (expiremental)
useTimeAgo has loaded