๐ Vue Currency Filter
Lightweight vue currency filter based on accounting.js
Demo
https://mazipan.github.io/vue-currency-filter/
Download
# NPM
npm install vue-currency-filter
# Yarn
yarn add vue-currency-filterSample Usage
Step by step to using vue-currency-filter:
Import in main.js
import VueCurrencyFilter from 'vue-currency-filter'Use Plugins
Vue.use(VueCurrencyFilter)Add Global Configuration
Vue.use(VueCurrencyFilter,
{
symbol : '$',
thousandsSeparator: '.',
fractionCount: 2,
fractionSeparator: ',',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: undefined,
})Add Multiple Instance
Vue.use(VueCurrencyFilter, [
{ // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: '',
},
{ // default name 'currency_2'
name: 'currency_2',
symbol: 'usd',
thousandsSeparator: ' ',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false,
avoidEmptyDecimals: '--',
}
])Use in View
<span>{{ 20000 | currency}}</span>Usage in Nuxt.js
Add vue-currency-filter/nuxt to modules section of nuxt.config.js
{
modules: [
'vue-currency-filter/nuxt',
// Or if you have custom options...
['vue-currency-filter/nuxt', {
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: undefined,
}],
// for multiple instance
['vue-currency-filter/nuxt', [
{ // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: '##',
},
{ // default name 'currency_2'
name: 'currency_2',
symbol: 'usd',
thousandsSeparator: ' ',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false,
avoidEmptyDecimals: '',
}
]],
]
}or using external options
{
modules: [
'vue-currency-filter/nuxt'
]
currencyFilter: [
{ // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: '',
},
{ // default name 'currency_2'
name: 'currency_2',
symbol: 'usd',
thousandsSeparator: ' ',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false,
avoidEmptyDecimals: '##',
}
]
// or for one filter
currencyFilter: { // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: undefined,
}
}Usage in Nuxt-typescript
you must add declaration for vue and nuxt context if you want autocomplete in methods
create file vue-currency-filters.ts in directory with your types
import { CurrencyFilterMethodInstance } from "vue-currency-filter/src/types";
declare module 'vue/types/vue' {
interface Vue {
$currency: CurrencyFilterMethodInstance,
$currency_2: CurrencyFilterMethodInstance
}
}
declare module '@nuxt/types' {
interface NuxtAppOptions {
$currency: CurrencyFilterMethodInstance,
$currency_2: CurrencyFilterMethodInstance
}
}Usage without NPM
Add script dependencies
<!-- Vue Dependency -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-currency-filter"></script>Use filters in global
if (VueCurrencyFilter) {
Vue.use(VueCurrencyFilter, {
symbol: "ยฃ",
thousandsSeparator: ",",
fractionCount: 0,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: false,
avoidEmptyDecimals: '',
})
}
var app = new Vue({
el: '#app',
data: {
curr: 1000
}
});See https://codepen.io/mazipan/pen/YdmNMy for code sample.
Add Configuration In Specific Place
<span>
{{ textInput | currency(configSymbol, configSeparator, configFractionCount,
configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
</span>Now configurations is also available as Object, thanks to sunhengzhe in PR #25:
<span>
{{ textInput | currency({
symbol: '',
thousandsSeparator: '',
fractionCount: '',
fractionSeparator: '',
symbolPosition: '',
symbolSpacing: '',
avoidEmptyDecimals: undefined,
})}}
</span>Available Options
{
name: 'string (default: currency)', // using for multiple instance filters
symbol: 'string (default : empty string)',
thousandsSeparator: 'string (default : .)',
fractionCount: 'number (default : 0)',
fractionSeparator: 'string (default: ",")',
symbolPosition: 'string (default: front)',
symbolSpacing: 'boolean (default: true)',
avoidEmptyDecimals: 'string (default: undefined)',
}How to test in Unit Test
Using @vue/test-utils we can create test for any Vue Plugins, like:
/* eslint-env jest */
import { shallowMount, createLocalVue } from "@vue/test-utils";
import VueCurrencyFilter from "vue-currency-filter";
import Component from "../pages/myComponent.vue";
describe("test myComponent", () => {
it("vue-currency-filter should working correctly", () => {
const localVue = createLocalVue();
localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: undefined,
});
let wrapper = shallowMount(Component, {
localVue
});
const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000.00");
localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: '',
});
wrapper = shallowMount(Component, {
localVue
});
const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000");
localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: '##',
});
wrapper = shallowMount(Component, {
localVue
});
const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000.##");
});
});See sample test here: https://codesandbox.io/s/6xk1mv694n
Contributing
If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.
Credits
- Vue for amazing framework
- Jetbrain for amazing support with free license for WebStorm IDE
- @iqbalhood as logo creator (see #19)
Support me
- ๐ ๐ฎ๐ฉ Trakteer
๐ ๐ BuyMeACoffe๐ ๐ Paypal๐ ๐ Ko-Fi
Hope this will be useful for you all
Copyright ยฉ 2017 Built with โค๏ธ by Irfan Maulana
Contributors
Thanks goes to these wonderful people (emoji key):
 Irfan Maulana |
 iqbalhood |
 ๅญๆๅฒ |
 Ricardo Gobbo de Souza ๐ป |
 Yashodhan Singh Rathore |
 Gijs Rogรฉ |
 Ivan Sysa |
 Nicola Cordioli ๐ป |
This project follows the all-contributors specification. Contributions of any kind welcome!