Fmt
FmtPhone
[object Object]
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
<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 |
AI Context
component: XAFmtPhone
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Displaying raw phone numbers in a formatted, human-readable way. Use instead of inline template expressions. Stateless and purely presentational.