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.

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 USDEURGBPEGPSAR, for more Currency Codes (ISO 4217 Standard).
  • Valid values for locale en-USde-DEfr-FRar-EGar-SA, for more List of locales.

Must Read: Javascript Number Format Currency | vuetify-money

Vue Currency Directive Formatting Within Text Inputs

Post NameVue Format Number Javascript
Author NamemahmoudZakaria90
CategoryText Plugins, Vue
Official PageClick Here | Click Here
Official Websitegithub.com
Publish DateMarch 24, 2022
Last UpdateJuly 28, 2023
DownloadLink Below
LicenseMIT

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

vue-format-number-javascript

Official Website(mahmoudZakaria90): Click Here

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

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *