Registry / web-framework / vue-money-format

vue-money-format

library1.2.4jsnpmunverified

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.

web-framework serialization

npm install vue-money-format

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-MONEY-FORMAT

vue-money-format

web-frameworkjavascriptv1.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MoneyFormat

✓ import MoneyFormat from 'vue-money-format'

✗ 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

✓ components: { 'money-format': MoneyFormat }

✗ components: { 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.

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>

Debug

Known issues

gotchaThe 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve component: money-format

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

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.

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.

Upgrade

Version history

1.2.4latest on npm

Audit

Dependencies

vuerequiredThis is a Vue component and requires Vue as a peer dependency to function.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/egomolka/vue-money-format ↗

packagehttps://www.npmjs.com/package/vue-money-format ↗