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 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.

Must Read: Javascript Number Format Currency | vuetify-money

Vue Currency Directive Formatting Within Text Inputs

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.