How to Format Numbers in Vuejs

How to format numbers in VueJS

Install numeral.js:

npm install numeral --save

Define the custom filter:

<script>
  var numeral = require("numeral");

  Vue.filter("formatNumber", function (value) {
    return numeral(value).format("0,0"); // displaying other groupings/separators is possible, look at the docs
  });

  export default
  {
    ...
  } 
</script>

Use it:

<tr v-for="(item, key, index) in tableRows">
  <td>{{item.integerValue | formatNumber}}</td>
</tr>

How to format numbers in thousands, million or billions in vue.js?

I found two npm packages that seem to do the trick:

https://www.npmjs.com/package/number-shortener

This first one doesn't seem very widely used, but looking at the code it's very lightweight.

The second is:

https://www.npmjs.com/package/number-abbreviate

More popular and also very lightweight. I guess read and play around to see which one suits you better.

Vue.Js 2 Input formatting number

You can achieve the formatting by simply using a computed property with separate getter and setter without the need for other dependencies.

computed: {
  formattedValue: {
    get: function() {
      return this.value;
    },
    set: function(newValue) {
      if (newValue.length > 2) {
        newValue = newValue.replace(".", "");
        this.value =
          newValue.substr(0, newValue.length - 2) +
          "." +
          newValue.substr(newValue.length - 2);
      } else {
        this.value = newValue;
      }
    }
  }
}

https://codesandbox.io/s/p7j447k7wq

I only added the decimal separator as an example, you'll have to add the , thousand separator in the setter for your full functionality.

VueJS Number Formats real time seperate by comma when Input Intl.NumberFormat

Sorry, a little late.

This is actually a crappy 5-min-put-together implementation of what you want to achieve. There are much better solutions out there and if you start using this, you'll soon notice its flaws.

But it should get you starting and help you get the gist of it.

new Vue({
  el: '#app',
  name: 'App',
  data() {
    return {
      cost: 0,
      formatLang: 'en-EN',
      formatStyle: 'currency',
      formatCurrency: 'USD'
    }
  },
  computed: {
    formatter() {
      return new Intl.NumberFormat(this.formatLang, {
        style: this.formatStyle,
        currency: this.formatCurrency
      })
    },
    formattedCost() {
      return this.formatter.format(this.cost)
    }
  }
})

label {
  position: relative;
}

label input {
  position: absolute;
  width: 0;
  height: 0;
  border: none;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label @click="$refs.numberInput.focus()">
    <input ref="numberInput" type="number" v-model="cost" />
    <div class="formatted">{{ formattedCost }}</div>
  </label>
</div>

How do I format currencies in a Vue component?

UPDATE: I suggest using a solution with filters, provided by @Jess.

I would write a method for that, and then where you need to format price you can just put the method in the template and pass value down

methods: {
    formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',')
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    }
}

And then in template:

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ formatPrice(item.total) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

BTW - I didn't put too much care on replacing and regular expression. It could be improved.enter code here

Vue.filter('tableCurrency', num => {  if (!num) {    return '0.00';  }  const number = (num / 1).toFixed(2).replace(',', '.');  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');});

Decimal Formatting in Vue Framework

I think you can use {{ parseFloat.($variable).toFixed(2) }}, is simple for decimal numbers for vue.js . you can try this.

Vue.js aplying phone number format

You probably need to have a look at how vue works and have some walk through to get a better understanding.

Their documentation is awesome, you can start from there - https://v2.vuejs.org/v2/guide/

For the question, here is a way you can utilise the framework

new Vue({
  el: "#app",
  data: {
    value: ''
  },
  methods: {
    acceptNumber() {
        var x = this.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  this.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Phone number</h2>
   <input v-model="value" type="text" @input="acceptNumber">
</div>

How to format telephone (i.e. xxx-xxx-xxxx) in vuejs with <b-input > tag

Given that the question doesn't have a lot of information on what has been tried or how to achieve it I'll just make a common component that you can reuse for later.

What you can do it with a watcher and a regexp on the field that formats the number to what you want to display

Vue.component('my-phone-input', {    template: `        <div>            <input type="text" v-model="formattedPhoneValue" @keyup="focusOut" @blur="focusOut"/>        </div>`,    data: function() {        return {            phoneValue: 0,            formattedPhoneValue: "0",            preventNextIteration: false        }    },    methods: {        focusOut: function(event) {            if (['Arrow', 'Backspace', 'Shift'].includes(event.key)) {              this.preventNextIteration = true;                return;            }            if (this.preventNextIteration) {              this.preventNextIteration = false;              return;            }            this.phoneValue = this.formattedPhoneValue.replace(/-/g, '').match(/(\d{1,10})/g)[0];
      // Format display value based on calculated currencyValue            this.formattedPhoneValue = this.phoneValue.replace(/(\d{1,3})(\d{1,3})(\d{1,4})/g, '$1-$2-$3');        }    }});
new Vue({    el: '#app'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script><div id="app">    <my-phone-input></my-phone-input></div>

How to Format Numbers in Vuejs