lloydjatkinson / Vue Numeral Filter
Licence: mit
Vue.js filter for Numeral.js π’ π£
Stars: β 73
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Numeral Filter
jooger.me
π My personal websiteοΌpowered by @nuxt
Stars: β 39 (-46.58%)
Mutual labels: vuejs2, vue-component
Vue Video Player
π @videojs component for @vuejs
Stars: β 4,026 (+5415.07%)
Mutual labels: vue-component, vuejs2
vue-notification-bell
Vue.js notification bell component.
Stars: β 64 (-12.33%)
Mutual labels: vuejs2, vue-component
Vue Codemirror
β¨οΈ @codemirror component for @vuejs
Stars: β 2,115 (+2797.26%)
Mutual labels: vue-component, vuejs2
Vue Quill Editor
π‘@quilljs editor component for @vuejs
Stars: β 6,874 (+9316.44%)
Mutual labels: vue-component, vuejs2
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: β 226 (+209.59%)
Mutual labels: vue-component, vuejs2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: β 20,090 (+27420.55%)
Mutual labels: vue-component, vuejs2
Xcui
π΄ A Vue.js 2.x desktop components colletion
Stars: β 88 (+20.55%)
Mutual labels: vue-component, vuejs2
Vue Star Rating
βοΈ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: β 509 (+597.26%)
Mutual labels: vue-component, vuejs2
Vue2 Calendar
vue 2.x calendar component
Stars: β 477 (+553.42%)
Mutual labels: vue-component, vuejs2
Vue Awesome Swiper
π Swiper component for @vuejs
Stars: β 12,072 (+16436.99%)
Mutual labels: vue-component, vuejs2
Navscroll Js
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.
Stars: β 41 (-43.84%)
Mutual labels: vue-component, vuejs2
Vue Gmaps
Search places and address using Google Maps API
Stars: β 108 (+47.95%)
Mutual labels: vue-component, vuejs2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: β 253 (+246.58%)
Mutual labels: vue-component, vuejs2
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: β 93 (+27.4%)
Mutual labels: vue-component, vuejs2
vue-popover
Reusable popover component for Vue
Stars: β 22 (-69.86%)
Mutual labels: vuejs2, vue-component
Vue Particles
Vue.js component for particles backgrounds β¨
Stars: β 1,220 (+1571.23%)
Mutual labels: vue-component, vuejs2
Vue Touch Ripple
π Touch ripple component for @vuejs
Stars: β 443 (+506.85%)
Mutual labels: vue-component, vuejs2
Vue2 Notify
Simple Vue2 notification component
Stars: β 36 (-50.68%)
Mutual labels: vue-component, vuejs2
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: β 1,071 (+1367.12%)
Mutual labels: vue-component, vuejs2
vue-numeral-filter
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?
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].