
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
vue-numeric
Advanced tools
Input field component to display a formatted currency value based on Vue.
Works with Vue 2.*
<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric"></script>
<script>
Vue.use(VueNumeric.default)
</script>
$ npm install vue-numeric --save
import Vue from 'vue'
import VueNumeric from 'vue-numeric'
export default {
name: 'App',
components: {
VueNumeric
}
}
import Vue from 'vue'
import VueNumeric from 'vue-numeric'
Vue.use(VueNumeric)
<template>
<vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
</template>
<script>
import VueNumeric from 'vue-numeric'
export default {
name: 'App',
components: {
VueNumeric
},
data: () => ({
price: ''
}),
}
</script>
Set the currency
prop to add a currency symbol within the input.
<vue-numeric currency="$"></vue-numeric>
Limit the minimum and maximum value by using min
and max
props.
min
defaults to 0
.min
and max
accept String
or Number
values.<vue-numeric v-bind:min="2000" v-bind:max="10000"></vue-numeric>
minus
defaults to false
(no negative numbers).
<vue-numeric v-bind:minus="false"></vue-numeric>
By default the decimal value is disabled. To use decimals in the value, add the precision
prop.
precision
accept a String
or Number
numeric value.<vue-numeric v-bind:precision="2"></vue-numeric>
,
.separator
prop to change the thousands separator.separator
only accepts space
, ,
or .
..
or space
as thousand separator, the decimal separator will be ,
.<vue-numeric separator="."></vue-numeric>
<vue-numeric placeholder="only number allowed"></vue-numeric>
By default, when you clean the input the value is set to 0
. You can change this value to fit your needs.
<vue-numeric :empty-value="1"></vue-numeric>
By default the value emitted for the input event is of type Number
. However you may choose to get a String
instead
by setting the property output-type
to String
.
<vue-numeric output-type="String"></vue-numeric>
Props | Description | Required | Type | Default |
---|---|---|---|---|
currency | Currency prefix | false | String | - |
currency-symbol-position | Position of the symbol (accepted values: prefix or suffix ) | false | String | prefix |
max | Maximum value allowed | false | Number | 9007199254740991 |
min | Minimum value allowed | false | Number | -9007199254740991 |
minus | Enable/disable negative values | false | Boolean | false |
placeholder | Input placeholder | false | String | - |
empty-value | Value when input is empty | false | Number | 0 |
output-type | Output Type for input event | false | String | Number |
precision | Number of decimals | false | Number | - |
separator | Thousand separator symbol (accepts space , . or , ) | false | String | , |
decimal-separator | Custom decimal separator | false | String | - |
thousand-separator | Custom thousand separator | false | String | - |
read-only | Hide input field and show the value as text | false | Boolean | false |
read-only-class | Class for read-only element | false | String | '' |
allow-clear | Use input type search | false | Boolean | false |
Vue-Numeric is open-sourced software licensed under the MIT license
Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks :smiley:
FAQs
Input field component to display currency value based on Vue.
The npm package vue-numeric receives a total of 4,577 weekly downloads. As such, vue-numeric popularity was classified as popular.
We found that vue-numeric demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.