Registry / web-framework / vue-numeric-input

vue-numeric-input

library2.0.0jsnpmunverified

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.

web-framework

npm install vue-numeric-input

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-NUMERIC-INPUT

vue-numeric-input

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueNumericInput

✓ import VueNumericInput from 'vue-numeric-input'

✗ const VueNumericInput = require('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)

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

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

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

Component import (local)

✓ import VueNumericInput from 'vue-numeric-input' export default { components: { VueNumericInput } }

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

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

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.

Debug

Known issues

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

affects: >=2.0.0

gotchaThe `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.

affects: >=0.0.0

gotchaThe `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.

affects: >=0.0.0

gotchaThe `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.

affects: >=0.0.0

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

fix

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

affects: >=0.0.0

Errors

Common errors & fixes

Failed to mount component: template or render function not defined

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.

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

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

fix

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

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

Component not registered globally or locally.

fix

Register via Vue.use(VueNumericInput) globally, or add to components option locally.

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

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

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 2 (required at runtime)

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/JayeshLab/vue-numeric-input ↗

packagehttps://www.npmjs.com/package/vue-numeric-input ↗