Vue Currency Formatter

1.2.4 · maintenance · verified Tue Apr 21

vue-money-format is a lightweight Vue component designed for displaying localized currency values, leveraging the browser's native `Intl.NumberFormat` API. Currently at version 1.2.4, its release cadence appears to be infrequent, with the last known activity around 2020. A key differentiator is its flexibility in handling currency values, supporting both standard super-unit representations (e.g., $100.00) and subunit-based integer storage (e.g., 10000 cents), which aligns with patterns found in libraries like Ruby Money gems to avoid floating-point inaccuracies. It offers configurable localization via BCP 47 language tags and currency symbols via ISO 4217 codes, and includes options to suppress subunit display with automatic rounding. The component boasts no external dependencies beyond Vue itself, making it a lean solution focused solely on currency presentation.

Common errors

```
Failed to resolve component: money-format
```
cause The `MoneyFormat` component was not correctly imported or registered within your Vue application's components option.

fix Ensure `import MoneyFormat from 'vue-money-format';` is present in your script, and the component is registered via `components: { 'money-format': MoneyFormat }`.
```
TypeError: Cannot read properties of undefined (reading 'format') or similar errors related to `Intl.NumberFormat`.
```
cause The `Intl.NumberFormat` API, which the component relies on, is either unavailable or lacks the necessary locale data in the current JavaScript environment (e.g., very old browsers, or a Node.js environment without full ICU data configured).

fix For older browsers, include an `Intl.NumberFormat` polyfill. For Node.js, ensure full ICU data is enabled (e.g., by setting the `NODE_ICU_DATA` environment variable or using the `full-icu` package).
```
[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String.
```
cause The `value` prop is receiving a string instead of a number. This commonly happens when binding directly from HTML input elements, which return string values by default.

fix Ensure the `value` prop is always passed as a number. Use type coercion like `Number(myStringValue)`, `parseInt(myStringValue)`, `parseFloat(myStringValue)`, or Vue's `v-model.number` directive on input elements.

Warnings

gotcha The component appears to be designed for Vue 2 (Options API syntax) and may not be fully compatible with Vue 3 without a compatibility layer or significant refactoring. Direct usage in a pure Vue 3 application might lead to unexpected behavior or require Vue 2 compatibility mode.
Fix: Ensure you are using Vue 2, or if using Vue 3, consider a compatibility wrapper or an alternative component specifically designed for Vue 3. Check for Vue 3 forks or updated versions.
gotcha The component relies on the browser's native `Intl.NumberFormat` API. While widely supported, older browsers (e.g., IE10/IE11) may lack full support or specific locale data. This could result in incorrect or fallback formatting.
Fix: If supporting older browsers or specific environments, ensure `Intl.NumberFormat` polyfills are included. For Node.js environments, ensure full ICU data is available if performing server-side rendering.
gotcha The `subunits-value` and `subunits-to-units` props have an interaction: if `subunits-to-units` is set, `subunits-value` is ignored. This can lead to confusion if both are provided.
Fix: Use either `subunits-value` (for standard subunit conversion like cents) or `subunits-to-units` (for custom, non-standard minor unit conversion). Do not set both if you expect `subunits-value` to take effect when `subunits-to-units` is present.
gotcha When `hide-subunits` is set to `true`, the component will round the value prior to display. This means that an input like $123.89 might display as $124, which could be misleading if precise fractional values are critical even when visually suppressed.
Fix: Be aware of the rounding behavior when using `hide-subunits`. If exact (even if hidden) fractional precision is paramount for downstream logic, avoid `hide-subunits` or perform rounding logic externally if it conflicts with expectations.

Install

npm install vue-money-format npm
yarn add vue-money-format yarn
pnpm add vue-money-format pnpm

Imports

MoneyFormat
wrong:
```
import { MoneyFormat } from 'vue-money-format'
```
correct:
```
import MoneyFormat from 'vue-money-format'
```
The component is a default export and should be imported without curly braces. This module import style typically requires a build tool like Webpack or Vite.
Component Registration
wrong:
```
components: { MoneyFormat }
```
correct:
```
components: { 'money-format': MoneyFormat }
```
While shorthand `MoneyFormat` works for components, using kebab-case in the template requires explicitly mapping the imported PascalCase component to a kebab-case tag name.

Quickstart

This quickstart demonstrates `vue-money-format`'s core features: subunit/full unit input, locale/currency codes, hiding subunits with rounding, custom `subunits-to-units` conversion, and interactive input with `v-model.number`.

<template>
  <div id="app-container">
    <h2>Vue Money Format Examples</h2>

    <p><strong>Example 1: USD Cents (12345 -> $123.45)</strong></p>
    <money-format
      :value="amountCentsUSD"
      locale="en-US"
      currency-code="USD"
      :subunits-value="true"
    ></money-format>

    <p><strong>Example 2: EUR Full Units (123.45 -> 123,45 €)</strong></p>
    <money-format
      :value="amountFullUnitsEUR"
      locale="de-DE"
      currency-code="EUR"
      :subunits-value="false"
    ></money-format>

    <p><strong>Example 3: GBP Cents, Hidden Subunits (12389 -> £124)</strong></p>
    <money-format
      :value="amountCentsGBP"
      locale="en-GB"
      currency-code="GBP"
      :subunits-value="true"
      :hide-subunits="true"
    ></money-format>

    <p><strong>Example 4: JPY with Subunits-to-Units (500000 -> ¥5,000)</strong></p>
    <p class="note">JPY officially has 0 minor units. This demonstrates custom subunits conversion.</p>
    <money-format
      :value="amountCentsJPY"
      locale="ja-JP"
      currency-code="JPY"
      :subunits-value="true"
      :subunits-to-units="100"
    ></money-format>

    <h3>Interactive Input (Enter amount in cents)</h3>
    <input type="number" v-model.number="interactiveAmount" placeholder="e.g., 99999" />
    <p>Formatted in AUD:</p>
    <money-format
      :value="interactiveAmount"
      locale="en-AU"
      currency-code="AUD"
      :subunits-value="true"
    ></money-format>
  </div>
</template>

<script>
  import MoneyFormat from 'vue-money-format'; // Assumes module resolution via build tool

  export default {
    components: {
      MoneyFormat
    },
    data() {
      return {
        amountCentsUSD: 12345, // Represents $123.45
        amountFullUnitsEUR: 123.45, // Represents 123.45 €
        amountCentsGBP: 12389, // Represents £123.89, will round to £124
        amountCentsJPY: 500000, // Represents ¥5000.00 if subunits-to-units is 100
        interactiveAmount: null
      };
    },
    mounted() {
        this.interactiveAmount = 78950; // Set initial value for interactive input
    }
  };
</script>

view raw JSON →