How to format numbers in VueJS

Question

I couldn't find a way of formatting numbers in VueJS. All I found was the builtin currency filter and vue-numeric for formatting currencies, which needs some modification to look like a label. And then you can't use it for displaying iterated array members.

Answer 1

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> 

Answer 2

Intl.NumberFormat(), default usage:

... created: function() {     let number = 1234567;     console.log(new Intl.NumberFormat().format(number)) }, ...  //console -> 1 234 567 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat