{"id":18915,"library":"vue-numeric-input","title":"Vue Numeric Input","description":"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.","status":"maintenance","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/JayeshLab/vue-numeric-input","tags":["javascript","input","text","component","number","numeric","vue","vue.js"],"install":[{"cmd":"npm install vue-numeric-input","lang":"bash","label":"npm"},{"cmd":"yarn add vue-numeric-input","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-numeric-input","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 (required at runtime)","package":"vue","optional":false}],"imports":[{"note":"Default import is the component itself; the package does not export named members. Can also be used with Vue.use() for global registration.","wrong":"const VueNumericInput = require('vue-numeric-input')","symbol":"VueNumericInput","correct":"import VueNumericInput from 'vue-numeric-input'"},{"note":"Vue.use() registers the component globally as 'vue-numeric-input'.","wrong":"Vue.component('vue-numeric-input', VueNumericInput);  // also valid but Vue.use is documented","symbol":"VueNumericInput (global registration)","correct":"import Vue from 'vue';\nimport VueNumericInput from 'vue-numeric-input';\nVue.use(VueNumericInput)"},{"note":"The package has no named exports; always use default import.","wrong":"import { VueNumericInput } from 'vue-numeric-input'","symbol":"Component import (local)","correct":"import VueNumericInput from 'vue-numeric-input'\n\nexport default {\n  components: { VueNumericInput }\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueNumericInput from 'vue-numeric-input';\n\nVue.use(VueNumericInput);\n\nnew Vue({\n  el: '#app',\n  template: `\n    <div>\n      <vue-numeric-input v-model=\"value\" :min=\"1\" :max=\"10\" :step=\"2\" :precision=\"1\"></vue-numeric-input>\n      <p>Value: {{ value }}</p>\n    </div>\n  `,\n  data: {\n    value: 5\n  }\n});\n\n// Requires bundler (webpack, vite) or use CDN script tags.\n// See installation section for CDN usage.","lang":"javascript","description":"Shows global registration of VueNumericInput and basic usage with v-model, min, max, step, and precision props."},"warnings":[{"fix":"Use Vue 2.x or upgrade to a Vue 3 compatible alternative.","message":"Component expects Vue 2; does not work with Vue 3 without a compatibility wrapper.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Explicitly set min and max props to enforce bounds.","message":"The `min` and `max` props default to -Infinity and Infinity respectively; if not set, negative numbers are allowed, which may not be expected.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always use v-model with a data property initialized to a number.","message":"The `value` prop is required for v-model to work; otherwise the component may not show an initial value.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Sanitize the v-model value in your component if exact precision is required.","message":"The `precision` prop sets the number of decimal places but doesn't perform rounding; values may have more decimals if the user types them.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set :mousewheel=\"true\" to enable mousewheel increment/decrement.","message":"The `mousewheel` prop is false by default; users expect mousewheel to work but must opt in.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure you import the default export: import VueNumericInput from 'vue-numeric-input'. Avoid destructuring.","cause":"Package is built as a UMD bundle but may not export a render function in some bundlers (e.g., if imported incorrectly).","error":"Failed to mount component: template or render function not defined"},{"fix":"Add value: 0 (or appropriate number) to your component's data() return object.","cause":"Using v-model without initializing the value in data().","error":"Property or method \"value\" is not defined on the instance but referenced during render"},{"fix":"Register via Vue.use(VueNumericInput) globally, or add to components option locally.","cause":"Component not registered globally or locally.","error":"Unknown custom element: <vue-numeric-input> - did you register the component correctly?"},{"fix":"Use v-model.number modifier or ensure initial data is numeric; use :min=\"1\" (bind) not min=\"1\".","cause":"v-model bound to a string instead of a number, or min/max/step props passed as strings.","error":"[Vue warn]: Invalid prop: type check failed for prop \"value\". Expected Number, got String."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}