Vue Numeric Input Field

2.5.1 · active · verified Sun Apr 19

Vue Numeric is a lightweight input component for Vue.js 2, designed to format and handle numeric values, particularly useful for currency inputs. The library is currently at version 2.5.1 and maintains an active release cadence, primarily focusing on bug fixes and minor feature enhancements. Key functionalities include automatic formatting with currency symbols, customizable thousands and decimal separators, precision control, and defining minimum/maximum constraints. It also offers control over the output type (Number or String) and the value used when the input is empty. Unlike simple HTML input types, vue-numeric provides robust, localized formatting and validation suitable for financial or data entry applications exclusively within Vue 2 ecosystems.

Common errors

```
Vue.use() expects a plugin function or an object with an install method
```
cause Attempting to use `Vue.use(VueNumeric.default)` in an NPM/ESM environment, where `VueNumeric` itself is already the plugin.

fix Simply use `Vue.use(VueNumeric)` when importing via `import VueNumeric from 'vue-numeric'`.
```
Property or method 'price' is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
```
cause The `v-model` target variable is not declared in the component's `data` option.

fix Ensure that any variable used with `v-model` (e.g., `price` in `<vue-numeric v-model="price">`) is properly initialized within the `data` object of your Vue component.
```
Input not displaying placeholder text or showing '0' instead of being empty.
```
cause This is likely due to the behavior change introduced in v2.4.1 where `v-model` bound to an empty initial value now correctly results in an empty string, allowing the placeholder to show. Previously, it would default to `"0"`.

fix Update to v2.4.1 or later. Ensure your `v-model` is initialized to an empty string (`''`) or explicitly use the `empty-value` prop (e.g., `:empty-value="''"`) if you desire an empty input visually and as a bound value.

Warnings

breaking Starting from v2.4.1, the placeholder behavior changed. Placeholders are now only shown when the input value is truly empty. Additionally, an empty `v-model` value on mounted will result in an empty string (`''`) instead of the previous default of `"0"`.
Fix: Review components using `vue-numeric` with placeholder logic or expecting an initial `0` value from an empty `v-model`. Adjust initialization or `empty-value` prop if the new behavior is undesirable.
gotcha The `separator` prop dictates the thousands separator. When `.` or `space` is used as the `separator`, the decimal separator will automatically be set to `,` (comma), overriding any implicit or custom decimal point settings. This can lead to unexpected formatting if not accounted for.
Fix: Be aware of this automatic decimal separator change when configuring `separator`. If `.` or `space` is used for thousands, ensure your locale and user expectations align with a comma decimal separator.
gotcha This library is specifically designed for Vue 2. It is not compatible with Vue 3 due to breaking changes in Vue's API and component structure. Attempting to use it in a Vue 3 project will result in errors.
Fix: Ensure your project is running Vue 2.x. For Vue 3 projects, consider alternative numeric input components built specifically for Vue 3.

Install

npm install vue-numeric npm
yarn add vue-numeric yarn
pnpm add vue-numeric pnpm

Imports

VueNumeric
wrong:
```
import { VueNumeric } from 'vue-numeric'
```
correct:
```
import VueNumeric from 'vue-numeric'
```
The component and plugin are exported as the default export.
VueNumeric (plugin usage)
wrong:
```
import VueNumeric from 'vue-numeric'; Vue.use(VueNumeric.default);
```
correct:
```
import VueNumeric from 'vue-numeric'; Vue.use(VueNumeric);
```
For NPM installations, `VueNumeric` itself is the plugin object. `.default` is typically only necessary for CDN/UMD global usage.
VueNumeric (component registration)
wrong:
```
const VueNumeric = require('vue-numeric');
```
correct:
```
import VueNumeric from 'vue-numeric'; export default { components: { VueNumeric } }
```
CommonJS `require` might work in some transpiled Vue 2 setups, but ES module `import` is the standard and recommended approach.

Quickstart

This quickstart demonstrates importing and globally registering `vue-numeric` as a Vue plugin, then using the component with various props like currency symbol, precision, separators, and min/max constraints, along with `v-model` binding for both Number and String output types.

<template>
  <div id="app">
    <h1>Vue Numeric Demo</h1>
    <p>Price: <vue-numeric currency="$" separator="," v-model="price" :precision="2" :min="0"></vue-numeric></p>
    <p>Value: {{ price }} (Type: {{ typeof price }})</p>

    <p>Quantity: <vue-numeric :output-type="'String'" :precision="0" v-model="quantity"></vue-numeric></p>
    <p>Value: {{ quantity }} (Type: {{ typeof quantity }})</p>

    <p>Discount: <vue-numeric currency="€" currency-symbol-position="suffix" separator="." :precision="2" :min="-100" :max="0" v-model="discount"></vue-numeric></p>
    <p>Value: {{ discount }} (Type: {{ typeof discount }})</p>
  </div>
</template>

<script>
import Vue from 'vue';
import VueNumeric from 'vue-numeric';

Vue.use(VueNumeric); // Register as a global component

export default {
  name: 'App',
  data() {
    return {
      price: 1234.56,
      quantity: '1000',
      discount: -50.00
    };
  },
  // If not registered globally via Vue.use(), register as local component:
  // components: {
  //   VueNumeric
  // }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  width: 200px;
}
</style>

view raw JSON →