vue-numeric

library2.5.1jsnpmunverified

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.

web-framework serialization

npm install vue-numeric

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-NUMERIC

vue-numeric

web-frameworkjavascriptv2.5.1

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.

VueNumeric

✓ import VueNumeric from 'vue-numeric'

✗ import { VueNumeric } from 'vue-numeric'

The component and plugin are exported as the default export.

VueNumeric (plugin usage)

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

✗ import VueNumeric from 'vue-numeric'; Vue.use(VueNumeric.default);

For NPM installations, `VueNumeric` itself is the plugin object. `.default` is typically only necessary for CDN/UMD global usage.

VueNumeric (component registration)

✓ import VueNumeric from 'vue-numeric'; export default { components: { VueNumeric } }

✗ const VueNumeric = require('vue-numeric');

CommonJS `require` might work in some transpiled Vue 2 setups, but ES module `import` is the standard and recommended approach.

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>

Debug

Known issues

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

affects: >=2.4.1

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

affects: *

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

affects: *

Errors

Common errors & fixes

Vue.use() expects a plugin function or an object with an install method

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.

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.

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.

Upgrade

Version history

2.5.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/kevinongko/vue-numeric ↗

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