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

Install v-money via Yarn or NPM:

# Yarn
$ yarn add v-money

# NPM
$ npm install v-money --save

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