Fmt
FmtCurrency
Formats a number as a localized currency string with optional color coding.
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
<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 |
AI Context
component: XAFmtCurrency
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Displaying raw currency values in a formatted, human-readable way. Use instead of inline template expressions or manual Intl API calls. Stateless and purely presentational.