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

Live Demo

Works with Vue 2.*

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

$ npm install vue-numeric --save

import Vue from 'vue' import VueNumeric from 'vue-numeric' export default { name: 'App', components: { VueNumeric } }

import Vue from 'vue' import VueNumeric from 'vue-numeric' Vue.use(VueNumeric)

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

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

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

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>

minus defaults to false (no negative numbers).

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

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>

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

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

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>

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