💸🍻 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

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 this commit for sample in Nuxt.js.

Add Configuration In Specific Place

<span>
{{ textInput | currency(configSymbol, configSeparator, configFractionCount,
configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
</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)'
}

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)

Hope this will be useful for you all

Copyright © 2017 Built with ❤️ by Irfan Maulana