VueUse

Appearance

Return to top
On this page

useTimeAgo

Category
Last Changed
7 months ago

Reactive time ago.

Demo

source

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 Usage

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

Source • Demo • Docs

Contributors

Anthony Fu
wheat
Alex Kozack

Changelog

No recent changes