Fmt
FmtDateTime
Formats a date/time value with short, long, full, or relative display modes.
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
<XAFmtDateTime />
Renders a <time> element with a formatted date. Supports short, long, full, and relative display modes. The title attribute always shows the full locale date for accessibility.
<XAFmtDateTime :value="user.createdAt" format="long" :show-time="true" />
<XAFmtDateTime :value="post.publishedAt" format="relative" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | String | Date | Number | required | Date input (ISO string, Date object, or timestamp) |
format | 'short' | 'long' | 'full' | 'relative' | 'short' | Display format |
showTime | Boolean | false | Include time in non-relative formats |
locale | String | undefined | BCP 47 locale tag (e.g., 'en-US') |
AI Context
component: XAFmtDateTime
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Displaying raw date/time values in a formatted, human-readable way. Use instead of inline template expressions or manual Intl API calls. Stateless and purely presentational.