Simple Custom Directive To Handle Currency Formatting Within Text Inputs


Vue currency directive is a simple and fast custom directive for handling currency formatting within text inputs.

vuejs format number javascript, javascript format number 2 decimals, javascript number format thousands separator, currency format js

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-currency-directive

$ 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 {
    amount: {
      value: '', 
      formatted: '' // Better to be empty
  directives: {
    currency: vueCurrencyDirective

3. Basic usage.

  <input v-currency="amount.value">
  <input v-currency="foo.value">
  <input v-currency="bar.value">

Format Currency In Text Box, Vue currency directive Plugin/Github

See Demo And Download

Official Website(mahmoudZakaria90): Click Here

This superior jQuery/javascript plugin is developed by mahmoudZakaria90. For extra Advanced Usages, please go to the official website.