{"id":15914,"library":"vue-money-format","title":"Vue Currency Formatter","description":"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.","status":"maintenance","version":"1.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/egomolka/vue-money-format","tags":["javascript","vue","vuejs","money","currency","formatting","format","i18n","eur"],"install":[{"cmd":"npm install vue-money-format","lang":"bash","label":"npm"},{"cmd":"yarn add vue-money-format","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-money-format","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Vue component and requires Vue as a peer dependency to function.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"import { MoneyFormat } from 'vue-money-format'","symbol":"MoneyFormat","correct":"import MoneyFormat from 'vue-money-format'"},{"note":"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.","wrong":"components: { MoneyFormat }","symbol":"Component Registration","correct":"components: { 'money-format': MoneyFormat }"}],"quickstart":{"code":"<template>\n  <div id=\"app-container\">\n    <h2>Vue Money Format Examples</h2>\n\n    <p><strong>Example 1: USD Cents (12345 -> $123.45)</strong></p>\n    <money-format\n      :value=\"amountCentsUSD\"\n      locale=\"en-US\"\n      currency-code=\"USD\"\n      :subunits-value=\"true\"\n    ></money-format>\n\n    <p><strong>Example 2: EUR Full Units (123.45 -> 123,45 €)</strong></p>\n    <money-format\n      :value=\"amountFullUnitsEUR\"\n      locale=\"de-DE\"\n      currency-code=\"EUR\"\n      :subunits-value=\"false\"\n    ></money-format>\n\n    <p><strong>Example 3: GBP Cents, Hidden Subunits (12389 -> £124)</strong></p>\n    <money-format\n      :value=\"amountCentsGBP\"\n      locale=\"en-GB\"\n      currency-code=\"GBP\"\n      :subunits-value=\"true\"\n      :hide-subunits=\"true\"\n    ></money-format>\n\n    <p><strong>Example 4: JPY with Subunits-to-Units (500000 -> ¥5,000)</strong></p>\n    <p class=\"note\">JPY officially has 0 minor units. This demonstrates custom subunits conversion.</p>\n    <money-format\n      :value=\"amountCentsJPY\"\n      locale=\"ja-JP\"\n      currency-code=\"JPY\"\n      :subunits-value=\"true\"\n      :subunits-to-units=\"100\"\n    ></money-format>\n\n    <h3>Interactive Input (Enter amount in cents)</h3>\n    <input type=\"number\" v-model.number=\"interactiveAmount\" placeholder=\"e.g., 99999\" />\n    <p>Formatted in AUD:</p>\n    <money-format\n      :value=\"interactiveAmount\"\n      locale=\"en-AU\"\n      currency-code=\"AUD\"\n      :subunits-value=\"true\"\n    ></money-format>\n  </div>\n</template>\n\n<script>\n  import MoneyFormat from 'vue-money-format'; // Assumes module resolution via build tool\n\n  export default {\n    components: {\n      MoneyFormat\n    },\n    data() {\n      return {\n        amountCentsUSD: 12345, // Represents $123.45\n        amountFullUnitsEUR: 123.45, // Represents 123.45 €\n        amountCentsGBP: 12389, // Represents £123.89, will round to £124\n        amountCentsJPY: 500000, // Represents ¥5000.00 if subunits-to-units is 100\n        interactiveAmount: null\n      };\n    },\n    mounted() {\n        this.interactiveAmount = 78950; // Set initial value for interactive input\n    }\n  };\n</script>\n","lang":"javascript","description":"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`."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `import MoneyFormat from 'vue-money-format';` is present in your script, and the component is registered via `components: { 'money-format': MoneyFormat }`.","cause":"The `MoneyFormat` component was not correctly imported or registered within your Vue application's components option.","error":"Failed to resolve component: money-format"},{"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).","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).","error":"TypeError: Cannot read properties of undefined (reading 'format') or similar errors related to `Intl.NumberFormat`."},{"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.","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.","error":"[Vue warn]: Invalid prop: type check failed for prop \"value\". Expected Number, got String."}],"ecosystem":"npm"}