vue-numeral-filter
v2.2.0
Published
Vue.js filter for Numeral.js
Downloads
8,311
Maintainers
Readme
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