Input field component to display currency value based on Vue.

Live Demo

Works with Vue 2.*

$ npm install vue-numeric --save

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

adding currency prefix to the input by using currency props.

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

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>

• minus default to false.

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

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>

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

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

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