Simple, quick custom directive for handling currency format inside text inputs.
npm install vue-currency-directive
Compatible with Vue 2.x
- Demo/Playground
- Installation
- Usage
- Global registration
- Local registration
- Dynamic arguments
- Examples
npm i vue-currency-directive || yarn add vue-currency-directivedata() a main state object e.g. amount and inside it 2 main properties value and formatted.USD, EUR, GBP, EGP, SAR, for more Currency Codes (ISO 4217 Standard).en-US, de-DE, fr-FR, ar-EG, ar-SA, for more List of locales.|[, ,]="">
v-currency="amount.value"
v-currency:EUR="amount.value"
v-currency:EUR|[1,2,(en-GB)]="amount.value"
For example:
With a Component/controlled input
const CurrencyInput = {
template: '',
}// In DOM/Single-file-component
Note: in case you are using a multiple or a group of different inputs with different types and you are not sure that the currency input is going to be indexed as the first item then you could pass a class name other than that if it's going to be the only or the first input in the group then you don't have to.
Global registration
`
import Vue from 'vue';
import vueCurrencyDirective from 'vue-currency-directive';Vue.directive('currency', vueCurrencyDirective);
Local registration
Dynamic arguments
In case you want to handle arguments in more dynamic way based on data changes and not sticking with a specific and locale, just add 2 more state inputs currency and locale inside the parent object e.g. amount in our case and remove any directive args e.g.:EUR[de-DE] from the component and vice-versa:
`
//Currency selector
//Locale selector
Examples
Passing no arguments will reflect to currency by default and for locale it will use the configured browser language.
`
// amount.value = 3244
//Output: $3,244.00
Passing currency argument only without locale.
// amount.value = 100234
//Output: €100,234.00
Passing with locale argument and different currency.
// amount.value = 554342
//Output: ٥٥٤٬٣٤٢٫٠٠ ج.م.