https://mazipan.github.io/vue-currency-filter/
# NPM npm install vue-currency-filter # Yarn yarn add vue-currency-filterStep by step to using vue-currency-filter:
import VueCurrencyFilter from 'vue-currency-filter'Vue.use(VueCurrencyFilter)Vue.use(VueCurrencyFilter, { symbol : '$', thousandsSeparator: '.', fractionCount: 2, fractionSeparator: ',', symbolPosition: 'front', symbolSpacing: true, avoidEmptyDecimals: undefined, })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: '--', } ])<span>{{ 20000 | currency}}</span>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, } }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 } }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.
<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>{ 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)', }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
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.
- Vue for amazing framework
- Jetbrain for amazing support with free license for WebStorm IDE
- @iqbalhood as logo creator (see #19)
- ๐ ๐ฎ๐ฉ Trakteer
- ๐ ๐ BuyMeACoffe
- ๐ ๐ Paypal
- ๐ ๐ Ko-Fi
Copyright ยฉ 2017 Built with โค๏ธ by Irfan Maulana
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!
![@dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?s=64&v=4){kind=small}
![@greenkeeper[bot]](https://avatars.githubusercontent.com/in/505?s=64&v=4){kind=small}
![@allcontributors[bot]](https://avatars.githubusercontent.com/in/23186?s=64&v=4){kind=small}
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
