Skip to content
This repository was archived by the owner on Apr 12, 2023. It is now read-only.

Vue.js filter for Numeral.js πŸ”’ πŸ”£

License

Notifications You must be signed in to change notification settings

lloydjatkinson/vue-numeral-filter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f4777b9 Β· Apr 12, 2023

History

68 Commits
Mar 31, 2021
Nov 15, 2021
May 6, 2020
Nov 15, 2021
Jul 21, 2018
Jun 24, 2018
Jun 24, 2018
Jun 23, 2018
Apr 12, 2023
Jul 21, 2018
Jul 20, 2022
Nov 15, 2021

Repository files navigation

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 MadeWithVueJs.com shield tested with jest License: MIT

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

Find this library useful?

ko-fi