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: 2 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 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-12T16:45:53.000Z (over 2 years ago)
• Last Synced: 2025-01-20T20:53:24.412Z (11 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

• awesome-vue - vue-numeral-filter - Vue.js filter for Numeral.js ` 📝 3 months ago` (UI Utilities [🔝](#readme))
• awesome-vue-zh - Vue-数字滤波器 - 一组过滤器,允许Numeral.js在组件的模板部分中内联使用. (UI实用程序 / 过滤器)
• awesome-vue - vue-numeral-filter - A collection of filters that allows Numeral.js to be used inline in the template section of a component. (Components & Libraries / UI Utilities)
• awesome-vue - vue-numeral-filter ★45 - A collection of filters that allows Numeral.js to be used inline in the template section of a component. (UI Utilities / Filters)
• awesome-vue - vue-numeral-filter - A collection of filters that allows Numeral.js to be used inline in the template section of a component. (UI Utilities / Filters)

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)