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

lloydjatkinson/vue-numeral-filter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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