Vue Currency Input component allows an easy input of currency formatted numbers
Last update: May 25, 2022
Vue Currency Input
The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component () and a custom Vue directive (v-currency) for decorating existing input components with currency format capabilities.
A ISO 4217 currency code (for example USD or EUR). Default is EUR. You can also pass an object {prefix, suffix} for customizing the currency symbol or null to hide the currency symbol permanently.
locale
String
A BCP 47 language tag (for example en or de-DE). Default is undefined (use the runtime's default locale).
auto-decimal-mode
Boolean
Whether the decimal symbol is inserted automatically, using the last inputted digits as decimal digits. Default is false (the decimal symbol needs to be inserted manually).
precision
Number/Object
The number of displayed decimal digits. Default is undefined (use the currency's default). Must be between 0 and 20 and can only be applied for currencies that support decimal digits. You can also pass an object {min, max} to use a precision range (ranges are not available when using auto-decimal-mode or value-as-integer).
distraction-free
Boolean/Object
Whether to hide negligible decimal digits, the currency symbol and the grouping symbol on focus. Default is true. You can also pass an object of boolean properties to configure each option: {hideNegligibleDecimalDigits, hideCurrencySymbol, hideGroupingSymbol}. Using false will leave the formatted value untouched on focus.
value-as-integer
Boolean
Whether the number value should be handled as integer instead of float value. Default is false.
value-range
Object
The range of accepted values as object {min, max}. Default is undefined (no value range). The validation is triggered on blur and automatically sets the respective threshold if out of range.
allow-negative
Boolean
Whether the input of negative values is allowed. Default is true. If false it prevents the user to press -.
Methods
Name
Arguments
Description
setValue
value (Number)
Sets a value programmatically.
Directive options
The v-currency directive supports the same options as the component which have to be passed as object:
We also provide a free, basic support for all users who want to use this VueJS Currency input in their software project. In case you want to customize this Currency input to suit your development needs, then feel free to contact our VueJS developers.
Collection of Components
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.
Changelog
Detailed changes for each release are documented in CHANGELOG.md.
This is a lightweight display component for localized currency display. It has no dependencies other than Vue. It supports both float and integer input, and can adjust for values stored as decimal-based subunits, such as cents, dirham, groszy, etc. Storing currency values in terms of the subunit allows you to store integers, rather than floating numbers, which ensures accuracy.
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.