1---
2category: Time
3---
4 
5# useTimeAgoIntl
6 
7Reactive time ago with i18n supported. Automatically update the time ago string when the time changes. Powered by `Intl.RelativeTimeFormat`.
8 
9## Usage
10 
11```js
12import { useTimeAgoIntl } from '@vueuse/core'
13 
14const timeAgoIntl = useTimeAgoIntl(new Date(2021, 0, 1))
15```
16 
17## Non-Reactivity Usage
18 
19In case you don't need the reactivity, you can use the `formatTimeAgo` function to get the formatted string instead of a Ref.
20 
21```js
22import { formatTimeAgoIntl } from '@vueuse/core'
23 
24const timeAgoIntl = formatTimeAgoIntl(new Date(2021, 0, 1)) // string
25```
26 
27## Type Declarations
28 
29```ts
30type Locale = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale
31export interface FormatTimeAgoIntlOptions {
32  /**
33   * The locale to format with
34   *
35   * @default undefined
36   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#locales
37   */
38  locale?: Locale
39  /**
40   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options
41   */
42  relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions
43  /**
44   * Whether to insert spaces between parts.
45   *
46   * Ignored if `joinParts` is provided.
47   *
48   * @default true
49   */
50  insertSpace?: boolean
51  /**
52   * Custom function to join the parts returned by `Intl.RelativeTimeFormat.formatToParts`.
53   *
54   * If provided, it will be used instead of the default join logic.
55   */
56  joinParts?: (
57    parts: Intl.RelativeTimeFormatPart[],
58    locale?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale,
59  ) => string
60  /**
61   * Custom units
62   */
63  units?: TimeAgoUnit[]
64}
65export interface UseTimeAgoIntlOptions<Controls extends boolean>
66  extends FormatTimeAgoIntlOptions, ConfigurableScheduler {
67  /**
68   * Expose more controls and the raw `parts` result.
69   *
70   * @default false
71   */
72  controls?: Controls
73  /**
74   * Update interval in milliseconds, set 0 to disable auto update
75   *
76   * @deprecated Please use `scheduler` option instead
77   * @default 30_000
78   */
79  updateInterval?: number
80}
81type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true
82  ? {
83      timeAgoIntl: ComputedRef<string>
84      parts: ComputedRef<Intl.RelativeTimeFormatPart[]>
85    } & Pausable
86  : ComputedRef<string>
87export interface TimeAgoUnit {
88  name: Intl.RelativeTimeFormatUnit
89  ms: number
90}
91/**
92 * A reactive wrapper for `Intl.RelativeTimeFormat`.
93 */
94export declare function useTimeAgoIntl(
95  time: MaybeRefOrGetter<Date | number | string>,
96  options?: UseTimeAgoIntlOptions<false>,
97): UseTimeAgoReturn<false>
98export declare function useTimeAgoIntl(
99  time: MaybeRefOrGetter<Date | number | string>,
100  options: UseTimeAgoIntlOptions<true>,
101): UseTimeAgoReturn<true>
102/**
103 * Non-reactive version of useTimeAgoIntl
104 */
105export declare function formatTimeAgoIntl(
106  from: Date,
107  options?: FormatTimeAgoIntlOptions,
108  now?: Date | number,
109): string
110/**
111 * Format parts into a string
112 */
113export declare function formatTimeAgoIntlParts(
114  parts: Intl.RelativeTimeFormatPart[],
115  options?: FormatTimeAgoIntlOptions,
116): string
117```
118