Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 3 months ago
JSON representation

Vue.js filter for Numeral.js 🔢 🔣

Host: GitHub
URL: https://github.com/lloydjatkinson/vue-numeral-filter
Owner: lloydjatkinson
License: mit
Archived: true
Created: 2018-06-23T01:49:29.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-04-12T16:45:53.000Z (over 1 year ago)
Last Synced: 2024-09-26T01:24:03.145Z (3 months ago)
Topics: javascript, number-format, number-formating, numeraljs, vue, vue-component, vue-filters, vue-filters-number, vue-number-filter, vue-numeral, vue-numeric, vuejs, vuejs2
Language: HTML
Homepage:
Size: 1.09 MB
Stars: 83
Watchers: 6
Forks: 11
Open Issues: 3
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

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)