Use the power of Numerals.js to properly format numbers inside your Vue components!
- Vue 3 (for Vue 2, see https://github.com/Kocal/vue-numerals/tree/v3)
- Node.js 10+
<!-- Import Numeral.js (https://numeraljs.com/#use-it) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.0/numeral.min.js"></script>
<!-- Then import vue-numerals -->
<script src="https://unpkg.com/vue-numerals/dist/vue-numerals.min.js"></script>$ yarn add vue-numerals 'numeral@>=2'import { createApp } from 'vue';
import VueNumerals from 'vue-numerals';
import App from './App.vue'
const app = createApp(App);
app.use(VueNumerals); // default locale is 'en'
// with options
app.use(VueNumerals, {
locale: 'fr'
});
app.mount('#app');Inside your component:
<template>
<div>
<!-- Will display: `12,345` -->
<p>{{ numeralFormat(count) }}</p>
<!-- Will display: `12,345 $` -->
<p>{{ numeralFormat(count, '0,0[.]00 $') }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 12345,
};
},
}
</script>MIT