No-Nonsense Monetary Inputs in Vue.js with v-money

Formatting money inputs can be a bit of a pain. There are all sorts of little differences between how various countries and cultures format their currency and numerical values. Writing an input component that can handle any of these cases isn’t too much work, but why spend the effort when someone else has already done it for you? (Obviously I’m a lazy programmer.) That’s where v-money steps in. To help out with displaying masked monetary inputs in our Vue.js apps.

Installation

Install v-money via Yarn or NPM:

# Yarn
$ yarn add v-money

# NPM
$ npm install v-money --save

Usage

The most useful way to use v-money is probably as a directive, though you can use it as a component as well.

<template>
  <div>
    <!-- Amount is the number that is input, moneyConfig is the v-money configuration object. -->
    <input v-model.lazy="amount" v-money="moneyConfig"/>
  </div>
</template>

<script>
import { VMoney } from 'v-money';

export default {
  directives: { VMoney }
  data() {
    return {
      // A super-low price of just $499.99! Get yours today!
      amount: 499.99,
      // The money directive's configuration.
      moneyConfig: {
        // The character used to show the decimal place.
        decimal: '.',
        // The character used to separate numbers in groups of three.
        thousands: ',',
        // The currency name or symbol followed by a space.
        prefix: 'USD $ ',
        // The suffix (If a suffix is used by the target currency.)
        suffix: '',
        // Level of decimal precision. REQUIRED
        precision: 2,
        // If mask is false, outputs the number to the model. Otherwise outputs the masked string.
        masked: false
      }
    }
  }
}
</script>

And with that, you have a nice monetary input that just works. (Copy-pasting functions too!)