{"id":12538,"library":"vue-numeric","title":"Vue Numeric Input Field","description":"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.","status":"active","version":"2.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/kevinongko/vue-numeric","tags":["javascript","component","currency","input","text","number","numeric","separator","vue"],"install":[{"cmd":"npm install vue-numeric","lang":"bash","label":"npm"},{"cmd":"yarn add vue-numeric","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-numeric","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The component and plugin are exported as the default export.","wrong":"import { VueNumeric } from 'vue-numeric'","symbol":"VueNumeric","correct":"import VueNumeric from 'vue-numeric'"},{"note":"For NPM installations, `VueNumeric` itself is the plugin object. `.default` is typically only necessary for CDN/UMD global usage.","wrong":"import VueNumeric from 'vue-numeric'; Vue.use(VueNumeric.default);","symbol":"VueNumeric (plugin usage)","correct":"import VueNumeric from 'vue-numeric'; Vue.use(VueNumeric);"},{"note":"CommonJS `require` might work in some transpiled Vue 2 setups, but ES module `import` is the standard and recommended approach.","wrong":"const VueNumeric = require('vue-numeric');","symbol":"VueNumeric (component registration)","correct":"import VueNumeric from 'vue-numeric'; export default { components: { VueNumeric } }"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>Vue Numeric Demo</h1>\n    <p>Price: <vue-numeric currency=\"$\" separator=\",\" v-model=\"price\" :precision=\"2\" :min=\"0\"></vue-numeric></p>\n    <p>Value: {{ price }} (Type: {{ typeof price }})</p>\n\n    <p>Quantity: <vue-numeric :output-type=\"'String'\" :precision=\"0\" v-model=\"quantity\"></vue-numeric></p>\n    <p>Value: {{ quantity }} (Type: {{ typeof quantity }})</p>\n\n    <p>Discount: <vue-numeric currency=\"€\" currency-symbol-position=\"suffix\" separator=\".\" :precision=\"2\" :min=\"-100\" :max=\"0\" v-model=\"discount\"></vue-numeric></p>\n    <p>Value: {{ discount }} (Type: {{ typeof discount }})</p>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport VueNumeric from 'vue-numeric';\n\nVue.use(VueNumeric); // Register as a global component\n\nexport default {\n  name: 'App',\n  data() {\n    return {\n      price: 1234.56,\n      quantity: '1000',\n      discount: -50.00\n    };\n  },\n  // If not registered globally via Vue.use(), register as local component:\n  // components: {\n  //   VueNumeric\n  // }\n};\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\ninput {\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 1em;\n  width: 200px;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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\"`.","severity":"breaking","affected_versions":">=2.4.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure your project is running Vue 2.x. For Vue 3 projects, consider alternative numeric input components built specifically for Vue 3.","message":"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.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Simply use `Vue.use(VueNumeric)` when importing via `import VueNumeric from 'vue-numeric'`.","cause":"Attempting to use `Vue.use(VueNumeric.default)` in an NPM/ESM environment, where `VueNumeric` itself is already the plugin.","error":"Vue.use() expects a plugin function or an object with an install method"},{"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.","cause":"The `v-model` target variable is not declared in the component's `data` option.","error":"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."},{"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.","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\"`.","error":"Input not displaying placeholder text or showing '0' instead of being empty."}],"ecosystem":"npm"}