Fmt
FmtRelativeTime
Displays a date as relative time (e.g., "2 hours ago") using NuxtTime.
Fmt
The Fmt category provides stateless display formatters. Each component is a thin wrapper around native Intl APIs, VueUse, or Nuxt utilities — they accept a raw value and render formatted output without any side effects.
Components
<XAFmtRelativeTime />
Displays a date as human-readable relative time (e.g., "3 days ago") using Nuxt's built-in <NuxtTime> with SSR-safe hydration. Shows the full absolute date in the title tooltip.
<XAFmtRelativeTime :value="comment.createdAt" />
<XAFmtRelativeTime :value="task.dueDate" locale="en-GB" fallback="No date set" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | String | Number | required | Date to format |
locale | String | 'en-US' | BCP 47 locale tag |
fallback | String | '—' | Text shown for invalid/missing dates |
textClass | String | '' | Additional CSS classes |
AI Context
component: XAFmtRelativeTime
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Displaying dates as relative time strings (e.g. "3 days ago"). SSR-safe via NuxtTime. Stateless and purely presentational.