f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
117 lines
3.0 KiB
Markdown
117 lines
3.0 KiB
Markdown
---
|
|
category: Time
|
|
---
|
|
|
|
# useTimeAgoIntl
|
|
|
|
Reactive time ago with i18n supported. Automatically update the time ago string when the time changes. Powered by `Intl.RelativeTimeFormat`.
|
|
|
|
## Usage
|
|
|
|
```js
|
|
import { useTimeAgoIntl } from '@vueuse/core'
|
|
|
|
const timeAgoIntl = useTimeAgoIntl(new Date(2021, 0, 1))
|
|
```
|
|
|
|
## Non-Reactivity Usage
|
|
|
|
In case you don't need the reactivity, you can use the `formatTimeAgo` function to get the formatted string instead of a Ref.
|
|
|
|
```js
|
|
import { formatTimeAgoIntl } from '@vueuse/core'
|
|
|
|
const timeAgoIntl = formatTimeAgoIntl(new Date(2021, 0, 1)) // string
|
|
```
|
|
|
|
## Type Declarations
|
|
|
|
```ts
|
|
type Locale = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale
|
|
export interface FormatTimeAgoIntlOptions {
|
|
/**
|
|
* The locale to format with
|
|
*
|
|
* @default undefined
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#locales
|
|
*/
|
|
locale?: Locale
|
|
/**
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options
|
|
*/
|
|
relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions
|
|
/**
|
|
* Whether to insert spaces between parts.
|
|
*
|
|
* Ignored if `joinParts` is provided.
|
|
*
|
|
* @default true
|
|
*/
|
|
insertSpace?: boolean
|
|
/**
|
|
* Custom function to join the parts returned by `Intl.RelativeTimeFormat.formatToParts`.
|
|
*
|
|
* If provided, it will be used instead of the default join logic.
|
|
*/
|
|
joinParts?: (
|
|
parts: Intl.RelativeTimeFormatPart[],
|
|
locale?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale,
|
|
) => string
|
|
/**
|
|
* Custom units
|
|
*/
|
|
units?: TimeAgoUnit[]
|
|
}
|
|
export interface UseTimeAgoIntlOptions<Controls extends boolean>
|
|
extends FormatTimeAgoIntlOptions {
|
|
/**
|
|
* Expose more controls and the raw `parts` result.
|
|
*
|
|
* @default false
|
|
*/
|
|
controls?: Controls
|
|
/**
|
|
* Update interval in milliseconds, set 0 to disable auto update
|
|
*
|
|
* @default 30_000
|
|
*/
|
|
updateInterval?: number
|
|
}
|
|
type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true
|
|
? {
|
|
timeAgoIntl: ComputedRef<string>
|
|
parts: ComputedRef<Intl.RelativeTimeFormatPart[]>
|
|
} & Pausable
|
|
: ComputedRef<string>
|
|
export interface TimeAgoUnit {
|
|
name: Intl.RelativeTimeFormatUnit
|
|
ms: number
|
|
}
|
|
/**
|
|
* A reactive wrapper for `Intl.RelativeTimeFormat`.
|
|
*/
|
|
export declare function useTimeAgoIntl(
|
|
time: MaybeRefOrGetter<Date | number | string>,
|
|
options?: UseTimeAgoIntlOptions<false>,
|
|
): UseTimeAgoReturn<false>
|
|
export declare function useTimeAgoIntl(
|
|
time: MaybeRefOrGetter<Date | number | string>,
|
|
options: UseTimeAgoIntlOptions<true>,
|
|
): UseTimeAgoReturn<true>
|
|
/**
|
|
* Non-reactive version of useTimeAgoIntl
|
|
*/
|
|
export declare function formatTimeAgoIntl(
|
|
from: Date,
|
|
options?: FormatTimeAgoIntlOptions,
|
|
now?: Date | number,
|
|
): string
|
|
/**
|
|
* Format parts into a string
|
|
*/
|
|
export declare function formatTimeAgoIntlParts(
|
|
parts: Intl.RelativeTimeFormatPart[],
|
|
options?: FormatTimeAgoIntlOptions,
|
|
): string
|
|
```
|