// Tutorial //

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

Published on June 18, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
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!)


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment