Simple, quick custom directive for handling currency format inside text inputs.
Compatible with Vue 2.x
npm i vue-currency-directive || yarn add vue-currency-directive
Register in your data()
a main state object e.g. amount
and inside it 2 main properties value
and formatted
.
You mainly get 2 outputs: one for the unformatted/original value and the other for the formatted value.
Valid values for currency USD
, EUR
, GBP
, EGP
, SAR
, for more Currency Codes (ISO 4217 Standard).
Valid values for locale en-US
, de-DE
, fr-FR
, ar-EG
, ar-SA
, for more List of locales.
<input v-currency:<currency?>[<locale?>]="<bindingExpression>">
For example:
<template>
<input v-currency="amount.value">
<input v-currency="foo.value">
<input v-currency="bar.value">
</template>
<script>
...
export default {
data(){
return {
amount: { // naming is not strict 'amount, foo, bar, ...etc'
value: '',
formatted: '' // Better to be empty
},
foo: {
value: '',
formatted: '' // Better to be empty
},
bar: {
value: '',
formatted: '' // Better to be empty
}
}
}
}
...
</script>
const CurrencyInput = {
template: '<input />',
}
// In DOM/Single-file-component
<CurrencyInput v-currency="amount.value">
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 .v-currency-input
other than that if it’s going to be the only or the first input in the group then you don’t have to.
import Vue from 'vue';
import vueCurrencyDirective from 'vue-currency-directive';
Vue.directive('currency', vueCurrencyDirective);
<script>
import vueCurrencyDirective from 'vue-currency-directive';
export default {
...
data(){
amount: {
value: '',
formatted: '' // Better to be empty
},
},
directives: {
currency: vueCurrencyDirective
},
...
}
</script>
In case you want to handle arguments in more dynamic way based on data changes and not sticking with a specific currency
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:
<template>
<input v-currency="amount.value" />
//Currency selector
<select v-model="amount.currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
</select>
//Locale selector
<select v-model="amount.locale">
<option value="en-US">US</option>
<option value="de-DE">DE</option>
<option value="en-GB">GB</option>
</select>
</template>
<script>
...
export default {
data(){
return {
amount: { // naming is not strict 'amount, foo, bar, ...etc'
value: '',
currency: '',
locale: '',
formatted: '' // Better to be empty
}
}
}
}
...
</script>
Passing no arguments will reflect to USD
currency by default and for locale it will use the configured browser language.
<input v-currency="amount.value"> // amount.value = 3244
//Output: $3,244.00
Passing currency argument only without locale.
<input v-currency:EUR="amount.value"> // amount.value = 100234
//Output: €100,234.00
Passing with locale argument and different currency.
<input v-currency:EGP[ar-EG]="amount.value"> // amount.value = 554342
//Output: ٥٥٤٬٣٤٢٫٠٠ ج.م.
Author: mahmoudZakaria90
Demo: https://codepen.io/Mahmoud-Zakaria/pen/YzqVBXE
Source Code: https://github.com/mahmoudZakaria90/vue-currency-directive
#vuejs #vue #javascript