A lightweight yet versatile number formatting & input masking library for Vue 3 and Vue 2 applications.
How to use it:
1. Import and register the vue-number-format.
// Globally import Vue from "vue"; import number from "vue-number-format"; Vue.use(number, { // options }); // Locally export default { components: { Number }, };
2. Add the vue-number-format component to the template.
<template> <div> <number v-model="price" v-bind="number"></number> {{price}} </div> </template>
3. You can also use it as a Vue directive.
import { VNumber } from "vue-number-format";
export default { data() { return { price: 123.45, number: { decimal: ".", separator: ",", prefix: "$ ", suffix: " #", precision: 2, } }; }, directives: { number: VNumber } };
4. All default options.
export default { prefix: '', suffix: '', separator: ',', decimal: '.', precision: 2, minimumFractionDigits: false, prefill: true, reverseFill: false, min: false, max: false, nullValue: '' }
Preview:
Changelog:
v3.31.0 (08/31/2023)
- bugfix & improvement
v3.30.0 (08/13/2023)
- Updated Vue Number Component for Better performance in Safari
v3.28/29.0 (08/13/2023)
- Bugfixes
v3.27.0 (04/19/2023)
- Bugfixes
v3.26.0 (04/12/2023)
- Fix duplicate events issue
v3.25.0 (04/11/2023)
- released new version for Vue 2
v3.24.0 (04/10/2023)
- [Fix] Reverse Fill Issue
- [Update] Core functions and Number format
v3.23.0 (04/07/2023)
- [Fix] Unable to start a decimal input with a “.”
v3.21.0 (04/02/2023)
- Fixed the issue with reverse fill
v3.19.0 (03/16/2023)
- Added watcher to formatting on outside value update
v3.16.0 (03/02/2023)
- Bugfix
v3.14.0 (02/22/2023)
- Bugfix
v3.13.0 (02/17/2023)
- updated
v3.10.0 (02/14/2023)
- moved to typescript
v3.7.0 (02/12/2023)
- moved to typescript
v3.5.0 (02/04/2023)
- updated directive for non negative
v3.3.2 (02/03/2023)
- Bugfix
v3.3.1 (12/03/2022)
- [Fix] Issue of prefix with decimal
v3.3.0 (11/04/2022)
- Change event didn’t fired on mac safari when value length grateā¦
v3.2.12 (10/08/2022)
- Fix min and max value issue
v3.2.0 (09/18/2022)
- Added browser version
v3.1.6 (09/16/2022)
- Updated number format function to fix 0 taking as null value
v3.1.4 (09/15/2022)
- Update
v3.1.3 (08/18/2022)
- Fix the issue of no value update on decimal key down
- Fix changing global config by component
v3.1.2 (07/26/2022)
- [Fix] Can not delete anything when place caret after separator
- [Fix] cursor position move to next one when delete first number
v3.1.1 (07/15/2022)
- Updated component, directive and core function
- Remove force change event before mount the directive
v3.1.0 (07/09/2022)
- added input:model-value event
v3.0.3 (07/08/2022)
- Updated component props
v3.0.2 (07/07/2022)
- Added change event on update value
v3.0.1 (05/01/2022)
- Emit input event
v3.0.0 (03/31/2022)
- fix some issue of reverse fill
v2.1.11 (03/08/2022)
- Update
Download Details:
Author: coders-tm
Live Demo: https://vue-number-format.netlify.app/guide/play-ground.html
Download Link: https://github.com/coders-tm/vue-number-format/archive/refs/heads/master.zip
Official Website: https://github.com/coders-tm/vue-number-format
Install & Download:
# Yarn
$ yarn add @coders-tm/vue-number-format
# NPM
$ npm i @coders-tm/vue-number-format