# Vue: `` URL: https://generaltranslation.com/en-GB/docs/vue/reference/components/currency.mdx Docs index: https://generaltranslation.com/llms.txt Description: Format a currency amount for the active locale. API reference for the `` component. The `` component formats a required numeric `value` using the `Intl.NumberFormat` currency style. It changes the display format but does not convert amounts between currencies. ## Overview [#overview] Bind the amount using `value` and optionally select an ISO 4217 currency code: ```vue ``` Use it on its own or as a runtime variable inside [``](/docs/vue/reference/components/t). ## How it works [#how-it-works] * A number is formatted locally using currency style. The amount is not translated or sent for currency conversion. * A string must represent a complete number. Whitespace-only strings and `null` render as empty; an invalid numeric string renders unchanged. * `currency` defaults to `USD`. After merging `options`, the component always applies its top-level `currency` prop and currency style, so `options.currency` and `options.style` cannot override them. * Formatter slot children are ignored. Always provide `value` and use a self-closing tag. * The component adds no HTML wrapper. ### Locale resolution When the active locale is the configured default locale, formatting uses only that default and ignores `locales`. For any other active locale, a standalone formatter tries explicit `locales` first, followed by the active locale and finally the default locale. Within [``](/docs/vue/reference/components/t), source fallback content uses the default locale. Translated content tries the active locale, then the default locale, and ignores any explicit `locales` prop. ## Props [#props] | Prop | Description | Type | Optional | Default | | ----------------------- | --------------------------------------- | -------------------------- | -------- | ----------------------- | | [`value`](#value) | Currency amount to format. | `number \| string \| null` | No | — | | [`currency`](#currency) | ISO 4217 currency code. | `string` | Yes | `USD` | | [`options`](#options) | Additional `Intl.NumberFormat` options. | `Intl.NumberFormatOptions` | Yes | `{}` | | [`locales`](#locales) | Preferred formatting locales. | `string[]` | Yes | Locale resolution order | ### `value` **Type** `number | string | null` · **Required** The complete numeric amount to format. Numeric strings are converted using `Number()` before formatting. The value remains in the selected currency; no exchange rate is applied. ### `currency` **Type** `string` · **Optional** · **Default** `USD` An ISO 4217 code, such as `USD`, `EUR`, or `JPY`. This prop controls the currency even if `options` includes a different `currency` field. ### `options` **Type** `Intl.NumberFormatOptions` · **Optional** · **Default** `{}` Additional options forwarded to `Intl.NumberFormat`. Common currency-formatting options include: | Option | Description | Type | Optional | Default | | -------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ------------------ | | `localeMatcher` | Locale matching algorithm. | `'lookup' \| 'best fit'` | Yes | `'best fit'` | | `numberingSystem` | Numbering system, such as `latn` or `arab`. | `string` | Yes | Locale-dependent | | `currencyDisplay` | How the currency is displayed. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Yes | `'symbol'` | | `currencySign` | Standard or accounting notation for negative values. | `'standard' \| 'accounting'` | Yes | `'standard'` | | `minimumIntegerDigits` | Minimum integer digits. | `number` | Yes | `1` | | `minimumFractionDigits` | Minimum fraction digits. | `number` | Yes | Currency-dependent | | `maximumFractionDigits` | Maximum fraction digits. | `number` | Yes | Currency-dependent | | `minimumSignificantDigits` | Minimum significant digits. | `number` | Yes | `1` | | `maximumSignificantDigits` | Maximum significant digits. | `number` | Yes | `21` | | `useGrouping` | When to display grouping separators. | `boolean \| 'auto' \| 'always' \| 'min2'` | Yes | Notation-dependent | | `notation` | Number notation. | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | Yes | `'standard'` | | `compactDisplay` | Compact-notation label width. | `'short' \| 'long'` | Yes | `'short'` | | `signDisplay` | When to display a sign. | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Yes | `'auto'` | | `roundingMode` | Direction used when rounding. | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Yes | `'halfExpand'` | | `roundingPriority` | Resolves conflicts between fraction and significant-digit settings. | `'auto' \| 'morePrecision' \| 'lessPrecision'` | Yes | `'auto'` | | `roundingIncrement` | Rounds to `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500`, or `5000`. | `number` | Yes | `1` | | `trailingZeroDisplay` | Controls trailing zeros on integer values. | `'auto' \| 'stripIfInteger'` | Yes | `'auto'` | The component forces `style: 'currency'` and the top-level `currency` value. Default currency fraction digits follow the currency's standard minor units. See the [`Intl.NumberFormat` options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) for the complete runtime-defined set. ### `locales` **Type** `string[]` · **Optional** · **Default** Locale resolution order Preferred BCP 47 locale codes for standalone formatting. These are tried before the active and default locales only when the active locale is not the configured default. ## Examples [#examples] ```vue title="OrderTotal.vue" ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.