Home
Other
Versatile Number Formatting Library For Vue

Versatile Number Formatting Library For Vue

coders-tm Last Updated: 4 weeks ago

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:

Versatile Number Formatting Library For Vue

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

Related Posts

Tags:

Add Comment