Versatile Number Formatting Library For Vue

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