Vue.js Filter For Numeral.js

A Vue.js filter for Numeral.js that allows for Numeral.js to be used inline in the template section of a component.

This can be a convenient way of rendering numerically formatted data in situations where you do not wish to create a computed property.

How to use it:

1. Import and register the component.

import vueNumeralFilterInstaller from 'vue-numeral-filter';
Vue.use(vueNumeralFilterInstaller, { 
  // specify the local
  locale: 'en-gb' 

2. A basic usage:

<table class="table">
          <td v-pre><pre>{{ 10485760 | numeral('0b') }}</pre></td>
          <td v-pre><pre>{{ 10485760 | bytes }}</pre></td>
          <td>{{ 10485760 | bytes }}</td>
          <td v-pre><pre>{{ 0.5567 | numeral('0.[00]%') }}</pre></td>
          <td v-pre><pre>{{ 0.5567 | percentage }}</pre></td>
          <td>{{ 0.5567 | percentage }}</td>
          <td>Thousands Separator</td>
          <td v-pre><pre>{{ 561739482 | numeral('0,0') }}</pre></td>
          <td v-pre><pre>{{ 561739482 | separator }}</pre></td>
          <td>{{ 561739482 | separator }}</td>
          <td v-pre><pre>{{ 20 | numeral('Oo') }}</pre></td>
          <td v-pre><pre>{{ 20 | ordinal }}</pre></td>
          <td>{{ 20 | ordinal }}</td>
          <td v-pre><pre>{{ 1000000 | numeral('0.0a') }}</pre></td>
          <td v-pre><pre>{{ 1000000 | abbreviate }}</pre></td>
          <td>{{ 1000000 | abbreviate }}</td>
          <td v-pre><pre>{{ 123987.202 | numeral('0.[00]e+0') }}</pre></td>
          <td v-pre><pre>{{ 123987.202 | exponential }}</pre></td>
          <td>{{ 123987.202 | exponential }}</td>


Vue.js Filter For Numeral.js


v2.2.0 (11/15/2021)

  • Update

Download Details:

Author: lloydjatkinson

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install vue-numeral-filter --save

Add Comment