Package Exports

vue-currency-filter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-currency-filter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
})

Use in View

<span>{{ 20000 | currency}}</span>

Usage in Nuxt.js

Create file plugins/currency.js, with code :

import VueCurrencyFilter from 'vue-currency-filter'
import Vue from 'vue'
Vue.use(VueCurrencyFilter, {
  symbol: '$',
  thousandsSeparator: ',',
  fractionCount: 2,
  fractionSeparator: '.',
  symbolPosition: 'front',
  symbolSpacing: true
})

Then update your nuxt.config.js, with code :

module.exports = {
  plugins: [
    { src: '~/plugins/currency', ssr: false }
  ]
}

See https://codesandbox.io/s/6xk1mv694n for Nuxt.js 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: ''
})}}
</span>

Available Options

{
  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:

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.

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

@iqbalhood: VueCurrencyFilter logo creator (see #19)