Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

🍒 Lightweight vue currency filter based on accounting.js

Awesome Lists containing this project

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!