🍒 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-filter

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