Fmt
FmtData
Renders a plain object or field array as a labeled key-value list with type-aware formatting.
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
<XAFmtData />
Renders a plain JavaScript object or explicit field array as a <dl> list with type-aware value formatting. Supports badges, booleans, links, emails, currency, dates, and copyable values. Useful for ad-hoc data display without defining a full XADetailPanel.
<!-- Object mode (auto-generates labels from keys) -->
<XAFmtData :data="{ status: 'active', amount: 1500, email: 'test@example.com' }" />
<!-- Field array mode (explicit definitions) -->
<XAFmtData
:data="[
{ key: 'status', label: 'Status', value: 'active', type: 'badge' },
{ key: 'amount', label: 'Amount', value: 1500, type: 'currency', currency: 'USD' },
{ key: 'email', label: 'Email', value: 'test@example.com', type: 'email' },
]"
layout="horizontal"
spacing="md"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Object | Array | required | Plain object (auto-converted) or array of field definitions |
layout | 'horizontal' | 'vertical' | 'horizontal' | Side-by-side or stacked label/value layout |
spacing | 'sm' | 'md' | 'lg' | 'md' | Spacing between items |
Supported field type values: badge, boolean, link, email, currency, date, copy, and default (plain text).
AI Context
component: XAFmtData
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Quickly rendering any plain object or field array as a labeled key-value list without defining a full XADetailPanel. Supports type-aware formatting for badges, booleans, links, emails, currency, dates, and copyable values.