Vue Currency Input component allows an easy input of currency formatted numbers

Overview

Vue Currency Input

The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component () and a custom Vue directive (v-currency) for decorating existing input components with currency format capabilities.

Table of contents

Browser Support

Chrome Firefox Safari Edge IE
83.0 77.0 13.1.1 83.0 11.9

Demo

Features

  • Format as you type
  • Locale dependent, ISO-compliant currency formatting
  • Distraction free (hides the formatting on focus for easier input)
  • Customizable currency symbols and precision ranges
  • Built-in value range validation
  • Works with input components of popular frameworks like Vuetify or Element)

Getting started

Install the npm package:

npm install vue-weblineindia-currency-input 
# OR 
yarn add vue-weblineindia-currency-input

Usage

Add the Vue plugin in your main.js:

import Vue from 'vue'
import VueCurrencyInput from 'vue-weblineindia-currency-input'

Vue.use(VueCurrencyInput)

Use the component:

">
<template>
  <div>
  <currency-input v-model="value" currency="INR" locale="en-IN"/>
  div>
template>

<script>
export default {
  data: () => ({ value: 1000 })
}
script>

Available Props

Name Type Description
value Number The value of the input. v-model is supported.
currency String/Object A ISO 4217 currency code (for example USD or EUR). Default is EUR. You can also pass an object {prefix, suffix} for customizing the currency symbol or null to hide the currency symbol permanently.
locale String A BCP 47 language tag (for example en or de-DE). Default is undefined (use the runtime's default locale).
auto-decimal-mode Boolean Whether the decimal symbol is inserted automatically, using the last inputted digits as decimal digits. Default is false (the decimal symbol needs to be inserted manually).
precision Number/Object The number of displayed decimal digits. Default is undefined (use the currency's default). Must be between 0 and 20 and can only be applied for currencies that support decimal digits. You can also pass an object {min, max} to use a precision range (ranges are not available when using auto-decimal-mode or value-as-integer).
distraction-free Boolean/Object Whether to hide negligible decimal digits, the currency symbol and the grouping symbol on focus. Default is true. You can also pass an object of boolean properties to configure each option: {hideNegligibleDecimalDigits, hideCurrencySymbol, hideGroupingSymbol}. Using false will leave the formatted value untouched on focus.
value-as-integer Boolean Whether the number value should be handled as integer instead of float value. Default is false.
value-range Object The range of accepted values as object {min, max}. Default is undefined (no value range). The validation is triggered on blur and automatically sets the respective threshold if out of range.
allow-negative Boolean Whether the input of negative values is allowed. Default is true. If false it prevents the user to press -.

Methods

Name Arguments Description
setValue value (Number) Sets a value programmatically.

Directive options

The v-currency directive supports the same options as the component which have to be passed as object:

Add the Vue plugin in your main.js:

import Vue from 'vue'
import VueCurrencyInput from 'vue-weblineindia-currency-input'

Vue.use(VueCurrencyInput)

Use the v-currencydirective :

">
<template>
 <div>
  <input v-currency="{
   currency:'INR' ,
   locale:'en-IN'
  }"/>
  div>
template>

Want to Contribute?

  • Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
  • Fork it.
  • Create new branch to contribute your changes.
  • Commit all your changes to your branch.
  • Submit a pull request.

Need Help?

We also provide a free, basic support for all users who want to use this VueJS Currency input in their software project. In case you want to customize this Currency input to suit your development needs, then feel free to contact our VueJS developers.


Collection of Components

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.


Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

vue-weblineindia-currency-input is inspired by the vue-currency-input.

License

MIT

Keywords

vue-weblineindia-currency-input, vue, text mask, input mask, currency input, money input, currency input-field, input formatter, input field component, vue components, vuejs, vuejs component

You might also like...
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

A Vue.js component that wraps the awesome autoNumeric input formatter library
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

A versetile tag input component built with Vue 3 Composition API
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

A Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Owner
WeblineIndia
An Offshore Custom Software Development Company providing Next-Gen Solutions, Web and Mobile App Development Solutions since 1999 with 150+ skilled developers.
WeblineIndia
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 44 Nov 19, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 425 Nov 28, 2022
Restrict input s to certain valid characters (e.g. formatting phone or card numbers)

Restricted Input Allow restricted character sets in input elements. Demo Try the latest version of Restricted Input here. Features Disallow arbitrary

Braintree 64 Feb 10, 2022
Tiny (2k gzipped) input/directive mask for currency

v-money Mask for Vue.js Features Lightweight (<2KB gzipped) Dependency free Mobile support Component or Directive flavors Accept copy/paste Editable F

Vue.js Tips 742 Nov 18, 2022
Vue-money-format: A lightweight display component for localized currency display

This is a lightweight display component for localized currency display. It has no dependencies other than Vue. It supports both float and integer input, and can adjust for values stored as decimal-based subunits, such as cents, dirham, groszy, etc. Storing currency values in terms of the subunit allows you to store integers, rather than floating numbers, which ensures accuracy.

null 15 Sep 22, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 41 Nov 4, 2022