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

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.

Tags: Currencycurrency convertercurrency formatterdirectiveformat number javascriptmahmoudZakaria90vue-currency-directive