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: 7 months ago
JSON representation

🍒 Lightweight vue currency filter based on accounting.js

• Host: GitHub
• URL: https://github.com/mazipan/vue-currency-filter
• Owner: mazipan
• License: mit
• Archived: true
• Created: 2017-07-31T11:41:50.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-08-20T22:27:04.000Z (over 4 years ago)
• Last Synced: 2025-04-13T09:04:31.360Z (8 months ago)
• Topics: vue, vue-currency, vue-currency-filter, vue-filter-currency, vue-filters, vue2
• Language: TypeScript
• Homepage: https://mazipan.github.io/vue-currency-filter/
• Size: 12.4 MB
• Stars: 245
• Watchers: 6
• Forks: 29
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• oss - Vue Currency Filter - Lightweight vue currency filter based on accounting.js - Vue, Currency, Accounting (Open Source Project / Utility)
• awesome-vue - vue-currency-filter - Lightweight vue currency filter based on accounting.js ` 📝 5 months ago` (UI Utilities [🔝](#readme))
• awesome-vue-zh - Vue货币过滤器 - 轻量级和可定制的Vue 2货币过滤器. (UI实用程序 / 过滤器)
• awesome-vue - vue-currency-filter ★74 - Lightweight and Customizeable Vue 2 Currency Filter. (UI Utilities / Filters)
• awesome-vue - vue-currency-filter - Lightweight and Customizeable Vue 2 Currency Filter. (UI Utilities / Filters)
• awesome-vue - vue-currency-filter - Lightweight and Customizable Vue 2 Currency Filter. (Components & Libraries / UI Utilities)

README

          
# 🍒 Vue Currency Filter



	

		

	

	
Lightweight vue currency filter based on accounting.js






  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  





    



## 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!