Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/lloydjatkinson/vue-numeral-filter

Vue.js filter for Numeral.js 🔢 🔣
https://github.com/lloydjatkinson/vue-numeral-filter

javascript number-format number-formating numeraljs vue vue-component vue-filters vue-filters-number vue-number-filter vue-numeral vue-numeric vuejs vuejs2

Last synced: about 1 month ago
JSON representation

Vue.js filter for Numeral.js 🔢 🔣

Lists

README 

        
> **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-numeral-filter



[![npm version](https://badge.fury.io/js/vue-numeral-filter.svg)](https://badge.fury.io/js/vue-numeral-filter)

[![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/838-shield.svg)](https://madewithvuejs.com/p/vue-js-filter-for-numeral-js/shield-link)

[![](https://data.jsdelivr.com/v1/package/npm/vue-numeral-filter/badge)](https://www.jsdelivr.com/package/npm/vue-numeral-filter)

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)



Vue.js filter for Numeral.js



Allows for [Numeral.js](http://numeraljs.com/) 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

```

```js

import vueNumeralFilterInstaller from 'vue-numeral-filter';



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

```



### CDN - Browser UMD Module

The UMD bundle will automatically install the filters.

```html



```



### Usage

The `numeral` filter accepts any of the formats specified in the [Numeral.js](http://numeraljs.com/) documentation. For example:

```html

{{ 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



### Find this library useful?



[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/K3K71ND3U)