Morioh
Login
Vuejs Components

Vuejs Components

4 years ago

Lightweight vue currency filter based on accounting.js

Vue Currency Filter

Vue Currency Logo

Lightweight vue currency filter based on accounting.js

Demo

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

Download

source-shell
# 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

source-js
import VueCurrencyFilter from 'vue-currency-filter'

Use Plugins

source-js
Vue.use(VueCurrencyFilter)

Add Global Configuration

source-js
Vue.use(VueCurrencyFilter,
{
  symbol : '$',
  thousandsSeparator: '.',
  fractionCount: 2,
  fractionSeparator: ',',
  symbolPosition: 'front',
  symbolSpacing: true
})

Use in View

text-html-basic
<span>{{ 20000 | currency}}</span>

Usage in Nuxt.js

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

source-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
    }],
  ]
}

Usage without NPM

Add script dependencies

text-html-basic
<!-- Vue Dependency -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- Vue Currency Filter Dependency -->
<script src="https://unpkg.com/vue-currency-filter@3.2.3/dist/vue-currency-filter.iife.js"></script>
<!-- Change 3.2.3 with latest version -->

Use filters in global

source-js
if (VueCurrencyFilter) {
  Vue.use(VueCurrencyFilter, {
    symbol: "£",
    thousandsSeparator: ",",
    fractionCount: 0,
    fractionSeparator: ".",
    symbolPosition: "front",
    symbolSpacing: false
  })
}

var app = new Vue({
  el: '#app',
  data: {
    curr: 1000
  }
});

See https://codepen.io/mazipan/pen/YdmNMy for code sample.

Add Configuration In Specific Place

text-html-basic
<span>
{{ textInput | currency(configSymbol, configSeparator, configFractionCount,
configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
</span>

Now configurations is also available as Object, thanks to sunhengzhe in PR #25:

text-html-basic
<span>
{{ textInput | currency({
  symbol: '',
  thousandsSeparator: '',
  fractionCount: '',
  fractionSeparator: '',
  symbolPosition: '',
  symbolSpacing: ''
})}}
</span>

Available Options

source-js
{
  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)'
}

Update Global Configs

Since global config only can be setted from Vue.use(VueCurrencyFilter, configs), but sometimes we need to update this global configs on runtime process.

from v3.1.0 we intoduce prototype method that can be update this global configs. You can use anywhere in your components like this code below:

source-js
this.$CurrencyFilter.setConfig(newConfigs)

But please be aware, this method is only update global configs without trigger to re-run filter function. So maybe you will face not sync data from your configs and your view. You need to update some value to trigger this new configs applied.

How to test in Unit Test

Using @vue/test-utils we can create test for any Vue Plugins, like:

source-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", () => {
    let localVue = createLocalVue();
    localVue.use(VueCurrencyFilter, {
      symbol: "$",
      thousandsSeparator: ",",
      fractionCount: 2,
      fractionSeparator: ".",
      symbolPosition: "front",
      symbolSpacing: true
    });

    let wrapper = shallowMount(Component, {
      localVue
    });

    let result = wrapper.find(".curr");
    expect(result.text()).toEqual("$ 1,000.00");
  });
});

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.

Credit

Hope this will be useful for you all

Copyright © 2017 Built with by Irfan Maulana

Github

#vuejs #javascript #vue-js

Lightweight vue currency filter based on accounting.js
15.60 GEEK