Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

vue-numerals

Node CI Release

Use the power of Numerals.js to properly format numbers inside your Vue components!

Requirements

Installation

In the browser

<!-- Import Numeral.js (http://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>

With Node.js

$ 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');

Usage

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>

License

MIT