Versatile Number Formatting Library For Vue

Description:

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

You Might Be Interested In:

Add Comment