vue-numeric

Input field component to display currency value based on Vue.

Live Demo

Works with Vue 2.*

Installation

$ npm install vue-numeric --save

Usage

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 prefix

adding currency prefix to the input by using currency props.

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

Minimum & maximum constraint

Limit minimum and maximum input by using min, max props.

• min default to 0.
• min, max accept String and Number.

<vue-numeric min="2000" v-bind:max="10000"></vue-numeric>

Disable/enable minus value

• minus default to false.

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

Enable decimal value

By default the decimal value is disabled, to use decimal value add precision props.

• precision accept String and Number numeric value.

<vue-numeric v-bind:precision="2"></vue-numeric>

Thousand separator

• Default thousand separator's symbol is ,.
• Use separator props to change separator's symbol.
• separator only accept either , or . value.
• When using . separator symbol, to input decimal value use , and vice versa.

<vue-numeric separator="."></vue-numeric>

Input placeholder when empty

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

Props

Props	Description	Required	Type	Default
currency	Currency prefix	false	String	-
max	Maximum value allowed	false	Number, String	-
min	Minimum value allowed	false	Number, String	0
minus	Enable/disable minus value	false	Boolean	false
placeholder	Input placeholder	false	String	-
precision	Number of decimals	false	Number, String	-
separator	Thousand separator type ( accept either . or , )	false	String	,

License

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