Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mazipan/vue-currency-filter

🍒 Lightweight vue currency filter based on accounting.js
https://github.com/mazipan/vue-currency-filter

vue vue-currency vue-currency-filter vue-filter-currency vue-filters vue2

Last synced: about 2 months ago
JSON representation

🍒 Lightweight vue currency filter based on accounting.js

Lists

README 

        
# 🍒 Vue Currency Filter





	

		Vue Currency Logo

	

	
Lightweight vue currency filter based on accounting.js







  

    NPM Version

  

  

    Bundlephobia Size

  

  

    Bundlephobia Size

  

  

    Download All Time

  

  

    Travis Build

  

  

    All Contributors

  






    Bundle Size




## Demo



[https://mazipan.github.io/vue-currency-filter/](https://mazipan.github.io/vue-currency-filter/)



## Download



```bash

# NPM

npm install vue-currency-filter



# Yarn

yarn add vue-currency-filter

```



## Sample Usage



Step by step to using  `vue-currency-filter`:



### Import in `main.js`



```javascript

import VueCurrencyFilter from 'vue-currency-filter'

```



### Use Plugins



```javascript

Vue.use(VueCurrencyFilter)

```



### Add Global Configuration



```javascript

Vue.use(VueCurrencyFilter,

{

  symbol : '$',

  thousandsSeparator: '.',

  fractionCount: 2,

  fractionSeparator: ',',

  symbolPosition: 'front',

  symbolSpacing: true,

  avoidEmptyDecimals: undefined,

})

```



### Add Multiple Instance



```javascript

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



```html

{{ 20000 | currency}}

```



### Usage in Nuxt.js



Add `vue-currency-filter/nuxt` to modules section of `nuxt.config.js`



```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

```js

{

  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

```ts

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



```html



```



Use filters in global



```js

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](https://codepen.io/mazipan/pen/YdmNMy) for code sample.



### Add Configuration In Specific Place



```html



{{ textInput | currency(configSymbol, configSeparator, configFractionCount,

configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}



```



**Now configurations is also available as Object**, thanks to [sunhengzhe](https://github.com/sunhengzhe) in [PR #25](https://github.com/mazipan/vue-currency-filter/pull/25/commits/052a741644556f4d1140e7b7e1ba96a8e2c0d015):



```html



{{ textInput | currency({

  symbol: '',

  thousandsSeparator: '',

  fractionCount: '',

  fractionSeparator: '',

  symbolPosition: '',

  symbolSpacing: '',

  avoidEmptyDecimals: undefined,

})}}



```



## Available Options



```javascript

{

  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:



```js

/* 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](https://codesandbox.io/s/6xk1mv694n)



## Contributing



If you'd like to contribute, head to the [contributing guidelines](/CONTRIBUTING.md). Inside you'll find directions for opening issues, coding standards, and notes on development.



## Credits



- [Vue](https://vuejs.org) for amazing framework

- [Jetbrain](https://www.jetbrains.com/?from=vue-currency-filter) for amazing support with free license for WebStorm IDE

- [@iqbalhood](https://github.com/iqbalhood) as logo creator (see [#19](https://github.com/mazipan/vue-currency-filter/issues/19))



[](https://www.jetbrains.com/?from=vue-currency-filter)



## Support me



- 👉 🇮🇩 [Trakteer](https://trakteer.id/mazipan?utm_source=github)

- 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github)

- 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github)

- 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan)



## Hope this will be useful for you all



Copyright © 2017 Built with ❤️ by Irfan Maulana



## Contributors



Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):



  

    
Irfan Maulana
💻

    
iqbalhood
🎨

    
孙恒哲
💻

    
Ricardo Gobbo de Souza
💻

    
Yashodhan Singh Rathore
💻

    
Gijs Rogé
💻

    
Ivan Sysa
💻

  

  

    
Nicola Cordioli
💻

  



This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!