Input field component to display a formatted currency value based on Vue.js

Last update: Jul 25, 2022

vue-numeric

npm npm npm Build Status Codecov npm

Input field component to display a formatted currency value based on Vue.

Live Demo

Works with Vue 2.*

Installation

Install via CDN

<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric"></script>

<script>
  Vue.use(VueNumeric.default)
</script>

Install via NPM

$ npm install vue-numeric --save

Register as Component

import Vue from 'vue'
import VueNumeric from 'vue-numeric'

export default {
  name: 'App',

  components: {
    VueNumeric
  }
}

Register as Plugin

import Vue from 'vue'
import VueNumeric from 'vue-numeric'

Vue.use(VueNumeric)

Usage

screen shot 2016-12-08 at 2 19 31 pm

Quick example

<template>
  <vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
</template>

<script>
import VueNumeric from 'vue-numeric'

export default {
  name: 'App',

  components: {
    VueNumeric
  },

  data: () => ({
    price: ''
  }),
}
</script>

Currency symbol

Set the currency prop to add a currency symbol within the input.

<vue-numeric currency="$"></vue-numeric>

Minimum & maximum constraint

Limit the minimum and maximum value by using min and max props.

  • min defaults to 0.
  • min and max accept String or Number values.
<vue-numeric v-bind:min="2000" v-bind:max="10000"></vue-numeric>

Disable/enable negative values

minus defaults to false (no negative numbers).

<vue-numeric v-bind:minus="false"></vue-numeric>

Enable decimal precision

By default the decimal value is disabled. To use decimals in the value, add the precision prop.

  • precision accept a String or Number numeric value.
<vue-numeric v-bind:precision="2"></vue-numeric>

Thousands separator

  • Default thousand separator's symbol is ,.
  • Use the separator prop to change the thousands separator.
  • separator only accepts space, , or ..
  • When using the . or space as thousand separator, the decimal separator will be ,.
<vue-numeric separator="."></vue-numeric>

Input placeholder when empty

<vue-numeric placeholder="only number allowed"></vue-numeric>

Value when empty

By default, when you clean the input the value is set to 0. You can change this value to fit your needs.

<vue-numeric :empty-value="1"></vue-numeric>

Output Type

By default the value emitted for the input event is of type Number. However you may choose to get a String instead by setting the property output-type to String.

<vue-numeric output-type="String"></vue-numeric>

Props

Props Description Required Type Default
currency Currency prefix false String -
currency-symbol-position Position of the symbol (accepted values: prefix or suffix) false String prefix
max Maximum value allowed false Number 9007199254740991
min Minimum value allowed false Number -9007199254740991
minus Enable/disable negative values false Boolean false
placeholder Input placeholder false String -
empty-value Value when input is empty false Number 0
output-type Output Type for input event false String String
precision Number of decimals false Number -
separator Thousand separator symbol (accepts space, . or ,) false String ,
decimal-separator Custom decimal separator false String -
thousand-separator Custom thousand separator false String -
read-only Hide input field and show the value as text false Boolean false
read-only-class Class for read-only element false String ''

License

Vue-Numeric is open-sourced software licensed under the MIT license

Support

Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks 😃

GitHub

https://github.com/kevinongko/vue-numeric
Comments
  • 1. Is `null` as a value possible?

    Hey,

    is it possible to add null as a value?

    For a more detailed explanation, this is my scenario:

    I have a form which is populated by API data and the user should add/change data and then submit it. There we have a <vue-numeric> input as well. When the user edits the field, everything works as expected.

    But I have the situation that sometimes the input isn't populated at all and the user doesn't change anything either. In this case the empty value 0 is sent back to the API but it should be null ...

    I just saw that there is something like :empty-value now ... But it still expects the the value is a Number, doesn't it?

    Reviewed by rathesDot at 2018-01-15 14:55
  • 2. Initial Value Empty if initial value is ZERO

    Expected Behavior

    My initial value is Zero. So I expect to see the value Zero formatted the way I configured it. I expect to see the field like this when I first open the page: image

    Actual Behavior

    When I first load the page all the values that are initially zero are rendered as empty fields: image

    If I click on the field then I get a value zero shown and if I click out of the field (blur) then the zero stays there formatted too. However, if I navigate to another page and get back the value is again gone.

    This only happens on values that are ZERO. All other values get correctly displayed initially too. I thought it might have something to do with the default value but that wasn't the case.

    I took a look and thought this might be related to #5 but it seems to be something a bit different.

    Specifications

    • Plugin Version: 4.2.1
    • Vue.js Version: 2.6.11
    • Browser: Chrome
    • OS: Linux

    Code

    Here is the component configuration:

    <vue-numeric
              v-model="ebitdaRate"
              decimal-separator=","
              separator="."
              currency="%"
              currency-symbol-position="suffix"
              :precision="2"
              :minus="true"
              class="growth-rate-input"
            />
    

    I am using the vue-class-component so I won't add the component Java code here, but I can guarantee that this is a reactive field which works correctly updating (set and get).

    Reviewed by Flavsditz at 2021-04-27 06:08
  • 3. Value not updating when changing amount from another input

    Hi!

    If I have two inputs using the same property, the one with vue-numeric is not updated. For example

    <input type="text" v-model="invoice.total">
    <vue-numeric v-model="invoice.total"></vue-numeric>
    
    Total is: {{invoice.total}}
    

    The value entered in the regular input tag is only updated in the html but not on the vue-numeric. Checking with dev tools, I see that amount is 0 and value is changing inside the VueNumeric component

    Any Ideas?

    Reviewed by emilioeduardob at 2017-05-19 01:18
  • 4. Trying to use vue-numeric input for all currency related fields of my form

    If you are reporting bugs please fill the form below otherwise feel free to delete the form.

    Expected Behavior

    when I use <vue-numeric> multiple times in a form each should reactively show its own result <vue-numeric separator="," v-bind:max="99999999999999" class="gui-input" v-bind:empty-value="0" v-bind:min="0" v-bind:precision="4" v-model="budget.audit_cost"></vue-numeric> <vue-numeric separator="," v-bind:max="99999999999999" class="gui-input" v-bind:empty-value="0" v-bind:min="0" v-bind:precision="4" v-model="budget.others"></vue-numeric>

    Actual Behavior

    but when enter number in first field, result not show but when enter number in second ,first component result also appears .

    Steps to Reproduce the Problem

    1.import VueNumeric from 'vue-numeric' 2.Vue.component('vue-numeric',VueNumeric) 3.

    Specifications

    • Plugin Version:2.3.0
    • Vue.js Version:^2.5.17
    • Browser:
    • OS:
    Reviewed by kalibano at 2020-07-29 07:21
  • 5. Vue-numeric DOM doesn't update?

    Excuse me, thank you for the plugin.

    I made a dynamic number entry and saved it into the database. However when I loaded the value from database and pushed the array to render in the dom (using v-for), the vue-numeric doesn't update (needs to be clicked first to update)

    Expected Behavior

    When model is programatically updated, updates dom and formats it

    Actual Behavior

    Shows placeholder instead screen shot 2017-10-19 at 10 57 26 After click: screen shot 2017-10-19 at 10 57 32

    Specifications

    • Plugin Version: 2.2.3
    • Vue.js Version: 2.5.2
    • Browser: Google Chrome
    • OS: MacOS Sierra 10.12.6

    Sorry for my bad English, and thanks before.

    Reviewed by Diathedia at 2017-10-19 04:03
  • 6. Placeholder shown instead of value

    Expected Behavior

    Given you have the following vue-numeric component:

    <vue-numeric v-model="value" placeholder="placeholder" />
    

    If value is set, I would expect to see the value. Just as described in the documents:

    Input placeholder when empty

    Actual Behavior

    When component is mounted, the value is not shown until you click on the input field. The placeholder is shown instead.

    Steps to Reproduce the Problem

    See example in codesandbox: https://codesandbox.io/s/v821j799wl

    Specifications

    • Plugin Version: 2.3.0
    • Vue.js Version: 2.5.2
    • Browser: Firefox Dev. 60.0b12
    • OS: macOS 10.13.3

    In #39 you said it was intended to work like this, can you explain the reason for this?

    Thanks!

    Reviewed by jeroenschieven at 2018-04-18 07:27
  • 7. Update method doesn't trigger in IE11

    Hey,

    I'll come back and properly fill out this issue this afternoon, but thought I would just put it here before I forget.

    The this.update method doesn't seem to ever get fired in IE11 or below. However the this.process one does.

    I have temporarily updated the this.process method to the following (i expanded the if statements while I was debugging) and remove the update method

    /**
    * Validate value before update the component.
    * @param {Number} value
    */
    process: function(value) {
    	if (value >= this.max) {
    		value = this.max;
    	}
    	if (value <= this.min) {
    		value = this.min;
    	}
    	if (!this.minus && value < 0) {
    		value = this.min >= 0 ? this.min: 0;
    	}
    
    	this.$emit('input', Number(accounting.toFixed(value, this.precision)));
    },
    
    Reviewed by mikestreety at 2017-10-30 12:37
  • 8. empty props implementation for not formatting empty values

    Hi @kevinongko!

    I did the implementation below, what do you think?

    When the value is empty or null, don't format the field so that the placeholder can be displayed, using empty props.

    <vue-numeric :empty="true" v-model="price"></vue-numeric>

    Reviewed by luisvquintas at 2017-06-03 13:38
  • 9. Add check for a ZERO value

    The JS language considers the value ZERO to be "false". This has to do with the fact that the numeric representation of true/false are 1/0.

    This was of course preventing the initial value of a numeric field to be set to zero since there was a check on the mounted function that saw if the value was defined.

    I've added a simple OR case, where if the value was evaluated to FALSE than we check again for if the value is zero. This fixed the case where the value ZERO was not being shown when it was deliberately chosen.

    It did break another case when we pass an empty string. To fix it I also test if the original value is not empty (which would be evaluated to zero)

    Make sure to read the contribution guidelines before submitting PR.

    Reviewed by Flavsditz at 2021-05-02 12:47
  • 10. Input looses focus

    I just downloaded your component but am getting an issue where the input looses focus on each keypress. So if the user wants to write 100,000 => he/she must type 1, set focus, 0, set focus, 0, set focus, etc. It can be very tiresome. Is there a work around for this?!?

    Following is my code: <vue-numeric separator="," v-model.native="data.item.value"></vue-numeric>

    Reviewed by ablishek at 2019-02-20 18:41
  • 11. Currency symbol position

    Hi, I've made a changes for currency symbol position (some currencies are on the left side, some on the right side). May I do a "Pull request" for your approval? Karel

    Reviewed by knagyorg at 2017-06-18 12:46
  • 12. Issue when typing digits with comma it's reseted to 0.00

    Can you add the ability to somehow restrict numeric input to only '.' or ',"? Because when I set the delimiter as '.' and try to enter 2,55 it resets to 0.00 (I think it's a bug) or we should be able to use both cases or limit this delimiter with some prop

    Expected Behavior

    2,55 or restrict to use ',' demiliter

    Actual Behavior

    2,55 resets to 0.00

    Steps to Reproduce the Problem

    1.Write 2,55 (with comma) 2. Remove focuse from input

    Specifications

    • Plugin Version: 2.5.0
    • Vue.js Version: 2.6.12
    • Browser: Chrome
    • OS: Windows
    Reviewed by Taifunov at 2022-05-24 11:50
  • 13. Fix vite build issue with import from accounting-js

    This PR fixes a vite build issue: vite build fails while trying to optimise its dependencies because accounting-js does not export default. Using named exports fixes the issue and allows vite to optimise vue-numeric.

    Reviewed by derickdsouza at 2022-04-14 19:13
  • 14. Random decimal values being added on the input

    If you are reporting bugs please fill the form below otherwise feel free to delete the form.

    Expected Behavior

    When the user inputs a value, the correct value should appear on the input, no matter the number of decimal digits.

    Actual Behavior

    If the decimal digits are set to a big number (in this case 15), some random decimal values are automatically added. This behavior can be reproduced on the official plugin live demo:

    image

    Steps to Reproduce the Problem

    1. Set the decimal digits to 15
    2. Input the number 1

    Specifications

    • Plugin Version: 2.3.0
    • Vue.js Version: 2.6.11
    • Browser: Chrome and Firefox
    • OS: Windows 10
    Reviewed by o-marchi at 2021-07-19 14:39
  • 15. Support for Vue 3 and Typescript

    Hi, I'm working on a project that uses Vue 3 and Typescript. I was wondering if you could include a type declaration module (.d.ts file) in the package. I'd be glad to help but I'm kinda a novice in this.

    Could not find a declaration file for module 'vue-numeric'. '[redacted]/node_modules/vue-numeric/dist/vue-numeric.min.js' implicitly has an 'any' type.
      Try `npm i --save-dev @types/vue-numeric` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-numeric';`ts(7016)
    
    Reviewed by ashkantaravati at 2021-06-13 10:50
  • 16. Can now bind any listener provided by user to the input

    This PR allows developers to bind any listener they like to the input element, rather than just specific ones. This is really useful for things like preventing the enter key submitting the form for instance, and I'm sure many other use cases.

    Reviewed by pareeohnos at 2018-07-19 09:28
Easy input of currency formatted numbers for Vue.js.
Easy input of currency formatted numbers for Vue.js.

Vue Currency Input The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (<currenc

Aug 6, 2022
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

Aug 1, 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.

Apr 26, 2022
Tiny (2k gzipped) input/directive mask for currency
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

Aug 12, 2022
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

Nov 21, 2021
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.

Dec 9, 2021
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.
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

Jul 26, 2022
A pattern-placeholder for Vue that changes based on input text.
A pattern-placeholder for Vue that changes based on input text.

This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.

Apr 19, 2022
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

Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
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

Jul 28, 2022
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

Aug 1, 2022
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

Jul 28, 2022
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

Jul 24, 2022
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

Jun 9, 2022
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

Aug 8, 2022
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

May 9, 2022
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

Jun 15, 2022
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 作为全局组

Jan 10, 2022
A tags input component for VueJS

A tags input component for VueJS

Apr 20, 2021