Plugin - v-currency A currency formatter for Vue

Plugin - v-currency A currency formatter for Vue

2018, Mar 14    

v-currency

A plugin for formatting currency in Vue.js

Usage

 Vue.use(Currency, {
  "type": "USD",
  "thousandSeparator": true,
 });

In order to use it in your components:

export default {
  name: 'Sample',
  data () {
    return {
      moneys: [
        100500.945, 15043.5, 9909, 210, 44.30, -24, 'tq1'
      ]
    }
  },
  methods: {
    getMoneys(i) {
      return this.$helpers.currency(this.moneys[i]);
    },
  },

To change currency on the fly

onChange(e){
  this.$helpers.changeCurrency(e.target.value);
  this.$forceUpdate();
}

Supported formats

  • USD
  • CAD
  • EUR
  • GBP
  • JPY
  • DEU

To create a custom format you can add rules to the components

"YOUR_CUSTOM_CURRENCY": {
  "symbol": "$_",
  "thousandSeperator": 0,
  "decimalSeperator": 0,
  "negativePattern": 2 
},

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Fork on Github

Fork me on GitHub