Vue.js Filter For Numeral.js

Install & Download:

# NPM
$ npm install vue-numeral-filter --save

Description:

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">
  <thead>
      <tr>
          <th>Type</th>
          <th>Numeral</th>
          <th>Alias</th>
          <th>Result</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Bytes</td>
          <td v-pre><pre>{{ 10485760 | numeral('0b') }}</pre></td>
          <td v-pre><pre>{{ 10485760 | bytes }}</pre></td>
          <td>{{ 10485760 | bytes }}</td>
      </tr>
      <tr>
          <td>Percentage</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>
      </tr>
      <tr>
          <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>
      </tr>
      <tr>
          <td>Ordinal</td>
          <td v-pre><pre>{{ 20 | numeral('Oo') }}</pre></td>
          <td v-pre><pre>{{ 20 | ordinal }}</pre></td>
          <td>{{ 20 | ordinal }}</td>
      </tr>
      <tr>
          <td>Abbreviate</td>
          <td v-pre><pre>{{ 1000000 | numeral('0.0a') }}</pre></td>
          <td v-pre><pre>{{ 1000000 | abbreviate }}</pre></td>
          <td>{{ 1000000 | abbreviate }}</td>
      </tr>
      <tr>
          <td>Exponential</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>
      </tr>
  </tbody>
</table>

Preview:

Changelog:

v2.2.0 (11/15/2021)

• Update