Vue Numeric Input

2.0.0 verified Sat Apr 25 auth: no javascript maintenance

A Vue.js number input component with optional increment/decrement controls, offering a customizable alternative to native number inputs. Version 2.0.0 is built for Vue 2.x and distributed as a UMD/CommonJS bundle via npm. It provides props for min/max, step, precision, alignment, size, mousewheel support, and control types (plus/minus or up/down). Unlike native inputs, it gives visual controls and consistent cross-browser behavior. The library is published as a single-file component, intended for global or local registration. No updates since 2020; consider it maintenance-only for Vue 2 projects.

Common errors

error Failed to mount component: template or render function not defined ↓

cause Package is built as a UMD bundle but may not export a render function in some bundlers (e.g., if imported incorrectly).

fix

Ensure you import the default export: import VueNumericInput from 'vue-numeric-input'. Avoid destructuring.

error Property or method "value" is not defined on the instance but referenced during render ↓

cause Using v-model without initializing the value in data().

fix

Add value: 0 (or appropriate number) to your component's data() return object.

error Unknown custom element: <vue-numeric-input> - did you register the component correctly? ↓

cause Component not registered globally or locally.

fix

error [Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String. ↓

cause v-model bound to a string instead of a number, or min/max/step props passed as strings.

fix

Use v-model.number modifier or ensure initial data is numeric; use :min="1" (bind) not min="1".

Warnings

gotcha Component expects Vue 2; does not work with Vue 3 without a compatibility wrapper. ↓

fix Use Vue 2.x or upgrade to a Vue 3 compatible alternative.

gotcha The `min` and `max` props default to -Infinity and Infinity respectively; if not set, negative numbers are allowed, which may not be expected. ↓

fix Explicitly set min and max props to enforce bounds.

gotcha The `value` prop is required for v-model to work; otherwise the component may not show an initial value. ↓

fix Always use v-model with a data property initialized to a number.

gotcha The `precision` prop sets the number of decimal places but doesn't perform rounding; values may have more decimals if the user types them. ↓

fix Sanitize the v-model value in your component if exact precision is required.

gotcha The `mousewheel` prop is false by default; users expect mousewheel to work but must opt in. ↓

fix Set :mousewheel="true" to enable mousewheel increment/decrement.

Install

npm install vue-numeric-input

yarn add vue-numeric-input

pnpm add vue-numeric-input

Imports

VueNumericInput
wrong
```
const VueNumericInput = require('vue-numeric-input')
```
correct
```
import VueNumericInput from 'vue-numeric-input'
```
Default import is the component itself; the package does not export named members. Can also be used with Vue.use() for global registration.

VueNumericInput (global registration)

wrong

Vue.component('vue-numeric-input', VueNumericInput);  // also valid but Vue.use is documented

correct

import Vue from 'vue';
import VueNumericInput from 'vue-numeric-input';
Vue.use(VueNumericInput)

Vue.use() registers the component globally as 'vue-numeric-input'.

Component import (local)

wrong

import { VueNumericInput } from 'vue-numeric-input'

correct

import VueNumericInput from 'vue-numeric-input'

export default {
  components: { VueNumericInput }
}

The package has no named exports; always use default import.

Quickstart

Shows global registration of VueNumericInput and basic usage with v-model, min, max, step, and precision props.

import Vue from 'vue';
import VueNumericInput from 'vue-numeric-input';

Vue.use(VueNumericInput);

new Vue({
  el: '#app',
  template: `
    <div>
      <vue-numeric-input v-model="value" :min="1" :max="10" :step="2" :precision="1"></vue-numeric-input>
      <p>Value: {{ value }}</p>
    </div>
  `,
  data: {
    value: 5
  }
});

// Requires bundler (webpack, vite) or use CDN script tags.
// See installation section for CDN usage.