vue-numeral-filter

Vue.js filter for Numeral.js

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.

Demonstration

https://jsfiddle.net/lloydjatkinson/uaq69zjc/

Installation

NPM

This is the recommended approach.

npm install vue-numeral-filter

import vueNumeralFilterInstaller from 'vue-numeral-filter';

Vue.use(vueNumeralFilterInstaller, { locale: 'en-gb' });

CDN - Browser UMD Module

The UMD bundle will automatically install the filters.

<script src="https://cdn.jsdelivr.net/npm/vue-numeral-filter/dist/vue-numeral-filter.min.js"></script>

Usage

The numeral filter accepts any of the formats specified in the Numeral.js documentation. For example:

{{ 561739482 | numeral('0,0') }} // => 561,739,482

Predefined Filters

A number of commonly used predefined filters are also provided for ease-of-use and readability.

Type	Numeral	Alias	Result
Bytes	`{{ 10485760 \| numeral('0b') }}`	`{{ 10485760 \| bytes }}`	10 MB
Percentage	`{{ 0.5567 \| numeral('0.[00]%') }}`	`{{ 0.5567 \| percentage }}`	55.67%
Thousands Separator	`{{ 561739482 \| numeral('0,0') }}`	`{{ 561739482 \| separator }}`	561,739,482
Ordinal	`{{ 20 \| numeral('Oo') }}`	`{{ 20 \| ordinal }}`	20th
Abbreviate	`{{ 1000000 \| numeral('0.0a') }}`	`{{ 1000000 \| abbreviate }}`	1.0m
Exponential	`{{ 123987.202 \| numeral('0.[00]e+0') }}`	`{{ 123987.202 \| exponential }}`	1.24e+5
Currency	`{{ 200.42 \| numeral('$0,0.00') }}`	`{{ 200.42 \| currency }}`	£200.42

Locales

See the list of locales here: https://github.com/adamwdraper/Numeral-js/tree/master/src/locales