Introduction

Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of digits to the right of the decimal.

Installation

WARNING

Install the npm package @coders-tm/vue-number-format@^2.20.0 for Vue 2.0

yarn add @coders-tm/vue-number-format

npm install @coders-tm/vue-number-format

Usage

Vue Number Format provide a ready-to-use component. But, it enables you to create your own based on your favorite input component (for example Quasar or Vuetify).

Globally

import Vue from 'vue'
import VueNumberFormat from '@coders-tm/vue-number-format'

// register directive v-number and component <number>
Vue.use(VueNumberFormat, { precision: 4 })

Use as component

<template>
  <div><vue-number v-model="price" v-bind="number"></vue-number> {{price}}</div>
</template>

<script>
  import { component as VueNumber } from '@coders-tm/vue-number-format'

  export default {
    components: {
      VueNumber,
    },

    data() {
      return {
        price: 123.45,
        number: {
          decimal: '.',
          separator: ',',
          prefix: '$ ',
          precision: 2,
          masked: false,
        },
      }
    },
  }
</script>

Use as directive

Can be use vmodel.lazy to bind works properly.

WARNING

Masking doesn't work with directive

<template>
  <div><input v-model.lazy="price" v-number="number" /> {{price}}</div>
</template>

<script>
  import { directive as VNumber } from '@coders-tm/vue-number-format'

  export default {
    data() {
      return {
        price: 123.45,
        number: {
          decimal: '.',
          separator: ',',
          prefix: '$ ',
          precision: 2,
        },
      }
    },

    directives: {
      number: VNumber,
    },
  }
</script>