Warning I no longer wish to work with Vue or maintain any Vue projects I have created due to growing frustration with the DX, the dev tooling situation, and it's community. Therefore this repository is unmaintained and archived.
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.
https://jsfiddle.net/lloydjatkinson/uaq69zjc/
This is the recommended approach.
npm install vue-numeral-filter
import vueNumeralFilterInstaller from 'vue-numeral-filter';
Vue.use(vueNumeralFilterInstaller, { locale: 'en-gb' });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>The numeral filter accepts any of the formats specified in the Numeral.js documentation. For example:
{{ 561739482 | numeral('0,0') }} // => 561,739,482A 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 |
See the list of locales here: https://github.com/adamwdraper/Numeral-js/tree/master/src/locales
