nuxt-x-app

Fmt

Lightweight display formatters for dates, currency, phone numbers, addresses, maps, percentages, file sizes, and structured data.

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'`)

`<XAFmtCurrency />`

Formats a number as a currency string using Intl.NumberFormat. Optionally colorizes positive values green and negative values red.

<XAFmtCurrency :value="invoice.total" currency="USD" :colorize="false" />
<XAFmtCurrency :value="balanceDelta" currency="EUR" :show-sign="true" :colorize="true" />

Props

Prop	Type	Default	Description
`value`	`Number`	required	Numeric value to format
`currency`	`String`	`'USD'`	ISO 4217 currency code
`locale`	`String`	`'en-US'`	BCP 47 locale tag
`showSign`	`Boolean`	`false`	Always show `+`/`-` sign
`colorize`	`Boolean`	`false`	Green for positive, red for negative

`<XAFmtPhone />`

Formats US phone numbers in various styles. Renders as a tel: anchor when clickable is true.

<XAFmtPhone value="5551234567" />
<!-- Output: (555) 123-4567 -->

<XAFmtPhone value="+15551234567" format="dashes" :clickable="true" />
<!-- Output: 555-123-4567 (clickable tel: link) -->

Props

Prop	Type	Default	Description
`value`	`String \| Number`	required	Raw phone number
`format`	`'parentheses' \| 'dashes' \| 'dots' \| 'spaces' \| 'international'`	`'parentheses'`	Output format
`clickable`	`Boolean`	`false`	Render as a `tel:` link
`fallback`	`String`	`'—'`	Text shown when value is empty
`textClass`	`String`	`''`	Additional CSS classes

`<XAFmtAddress />`

Renders a postal address as a block (multi-line) or inline (comma-separated) format. Accepts either a structured address object or individual field props. Optionally appends a map link.

<!-- Object mode -->
<XAFmtAddress :address="contact.address" :show-map-link="true" />

<!-- Field mode -->
<XAFmtAddress
  street="123 Main St"
  city="Springfield"
  state="IL"
  zip="62701"
  :inline="true"
  :show-map-link="true"
  map-provider="google"
/>

Props

Prop	Type	Default	Description
`address`	`Object`	`null`	Address object (supports `street`, `street2`, `city`, `state`, `zip`, `country` and common aliases)
`street`	`String`	`''`	Street line 1
`street2`	`String`	`''`	Street line 2 / unit
`city`	`String`	`''`	City
`state`	`String`	`''`	State / region
`zip`	`String`	`''`	Postal code
`country`	`String`	`''`	Country
`inline`	`Boolean`	`false`	Single-line comma-separated format
`showCountry`	`Boolean`	`false`	Include country in output
`showMapLink`	`Boolean`	`true`	Append a "View on Map" link
`mapLinkText`	`String`	`''`	Custom map link label
`mapProvider`	`'google' \| 'apple'`	`'google'`	Map provider for the link URL

`<XAFmtMap />`

Embeds a Google Maps iframe using the no-API-key embed URL. Accepts an address string, lat/lng coordinates, or a search query. Renders client-side only (<ClientOnly>).

<XAFmtMap address="1600 Amphitheatre Parkway, Mountain View, CA" :height="300" />
<XAFmtMap :lat="37.4224764" :lng="-122.0842499" :zoom="17" />
<XAFmtMap query="coffee shops near Times Square" map-type="satellite" />

Props

Prop	Type	Default	Description
`address`	`String`	`null`	Address string to search for
`query`	`String`	`null`	Free-text search query
`lat`	`Number`	`null`	Latitude coordinate
`lng`	`Number`	`null`	Longitude coordinate
`zoom`	`Number`	`15`	Zoom level (1–21)
`width`	`String \| Number`	`'100%'`	Container width
`height`	`String \| Number`	`300`	Container height (px)
`mapType`	`'roadmap' \| 'satellite'`	`'roadmap'`	Map display type
`allowFullscreen`	`Boolean`	`true`	Enable fullscreen button
`loading`	`'lazy' \| 'eager'`	`'lazy'`	Iframe loading strategy
`containerClass`	`String`	`''`	Additional container CSS classes

`<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

`<XAFmtPercent />`

Formats a percentage value with configurable decimal places, optional sign, color coding (threshold-based or change-based), and a trend arrow icon.

<XAFmtPercent :value="85.5" />
<!-- Output: 85.5% -->

<XAFmtPercent :value="25" :colorize="true" />
<!-- Output: 25% (red — below 50 threshold) -->

<XAFmtPercent :value="-12.5" :colorize-change="true" :show-sign="true" :show-trend="true" :trend="-1" />
<!-- Output: -12.5% (red, with down arrow) -->

Props

Prop	Type	Default	Description
`value`	`Number`	required	Percentage value (0–100 scale by default)
`decimals`	`Number`	`1`	Number of decimal places
`showSign`	`Boolean`	`false`	Show `+` for positive values
`colorize`	`Boolean`	`false`	Color by threshold: `<low` = red, `<medium` = yellow, else green
`colorizeChange`	`Boolean`	`false`	Color as change: positive = green, negative = red
`thresholds`	`Object`	`{ low: 50, medium: 75 }`	Custom thresholds for `colorize` mode
`showTrend`	`Boolean`	`false`	Show a trend arrow icon
`trend`	`Number`	`0`	Trend direction: `1` (up), `-1` (down), `0` (none)
`locale`	`String`	`'en-US'`	BCP 47 locale tag
`textClass`	`String`	`''`	Additional CSS classes

`<XAFmtFileSize />`

Converts a byte count to a human-readable string. Supports decimal (KB, MB, GB) or binary (KiB, MiB, GiB) unit systems.

<XAFmtFileSize :value="document.size" />
<!-- Output: 2.38 MB -->

<XAFmtFileSize :value="1073741824" :binary="true" :decimals="0" />
<!-- Output: 1 GiB -->

Props

Prop	Type	Default	Description
`value`	`Number`	required	File size in bytes
`decimals`	`Number`	`2`	Decimal places
`binary`	`Boolean`	`false`	Use binary units (KiB, MiB, GiB)
`locale`	`String`	`'en-US'`	BCP 47 locale for number formatting
`fallback`	`String`	`'0 B'`	Text shown for zero or null values
`textClass`	`String`	`''`	Additional CSS classes

`<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

category: Fmt
package: "@xenterprises/nuxt-x-app"
components:
  - XAFmtDateTime
  - XAFmtCurrency
  - XAFmtPhone
  - XAFmtAddress
  - XAFmtMap
  - XAFmtRelativeTime
  - XAFmtPercent
  - XAFmtFileSize
  - XAFmtData
use-when: >
  Displaying raw data values in a formatted, human-readable way. Use instead
  of inline template expressions or manual Intl API calls. All components are
  stateless and purely presentational.
key-patterns:
  - All Fmt components are display-only — no user interaction or state
  - XAFmtData is a quick way to render any object as key-value pairs
  - XAFmtMap requires no Google Maps API key
  - XAFmtRelativeTime is SSR-safe via NuxtTime
  - XAFmtPercent covers both progress metrics (colorize) and delta values (colorizeChange)

Edit this pageorReport an issue

Rich email composer with grouped recipient autocomplete, CC support, rich-text body, and file attachments.

Inline

Inline editing components that let users edit field values in place with optimistic updates and automatic API persistence.