Vue currency directive is a simple and fast custom directive for handling currency formatting within text inputs.
Usage
- Register in your
data()
a main state object e.g.amount
and inside it 2 main propertiesvalue
andformatted
. - 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.
Must Read: Javascript Number Format Currency | vuetify-money
Vue Currency Directive Formatting Within Text Inputs
Post Name | Vue Format Number Javascript |
Author Name | mahmoudZakaria90 |
Category | Text Plugins, Vue |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | March 24, 2022 |
Last Update | July 28, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
Install and download:
# Yarn $ yarn add vue-currency-directive # NPM $ npm i vue-currency-directive --save
1. Import the module.
import Vue from 'vue'; import vueCurrencyDirective from 'vue-currency-directive';
2. Routing registration.
Vue.directive('currency', vueCurrencyDirective);
// or export default { ... data(){ amount: { value: '', formatted: '' // Better to be empty }, }, directives: { currency: vueCurrencyDirective }, ... }
3. Basic usage.
<template> <input v-currency="amount.value"> <input v-currency="foo.value"> <input v-currency="bar.value"> </template>
See Demo And Download

Official Website(mahmoudZakaria90): Click Here
This superior jQuery/javascript plugin is developed by mahmoudZakaria90. For extra Advanced Usage, please go to the official website.