JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 13850
  • Score
    100M100P100Q133966F
  • License MIT

Vue3 currency input/directive mask

Package Exports

  • v-money3

Readme

workflow

Money Mask for Vue 3

View Demo

The Mask Money

Disclaimer

The old v-money library seems to be abandoned! Since I use it in many projects and part of then will be upgraded to Vue3, I needed it to work after the upgrades.

Feel free to open an issue or post a pull request!

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable
  • Min / Max Limits

Usage

Installation

npm i v-money3 --save

Register Globally (view codesandbox)

import { createApp } from "vue";
import money from 'v-money3'

const app = createApp({/* options */})

// register directive v-money3 and component <money3>
app.use(money)

Only Global Component (view codesandbox)

import { createApp } from "vue";
import { Money3Component } from 'v-money3'

const app = createApp({/* options */})

// register component <money3>
app.component("money3", Money3Component)

Only Global Directive (view codesandbox)

import { createApp } from "vue";
import { Money3Directive } from 'v-money3'

const app = createApp({/* options */})

// register directive v-money3
app.directive('money3', Money3Directive)

Use as component (view codesandbox)

<template>
  <money3 v-model="amount" v-bind="config"></money3> {{ amount }}
</template>

<script>
  import { Money3Component } from 'v-money3'

  export default {
    components: { money3: Money3Component },
    data () {
      return {
        amount: 123.45,
        config: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false,
          disableNegative: false,
          disabled: false,
          min: Number.MIN_SAFE_INTEGER,
          max: Number.MAX_SAFE_INTEGER,
          allowBlank: false,
          minimumNumberOfCharacters: 0,
        }
      }
    }
  }
</script>

Use as directive (view codesandbox)

Must use v-model.lazy to bind works properly.

<template>
  <input v-model.lazy="amount" v-money3="config" /> {{ amount }}
</template>

<script>
  import { Money3Directive } from 'v-money3'

  export default {
    data () {
      return {
        amount: 123.45,
        config: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false /* doesn't work with directive */,
          disableNegative: false,
          disabled: false,
          min: Number.MIN_SAFE_INTEGER,
          max: Number.MAX_SAFE_INTEGER,
          allowBlank: false,
          minimumNumberOfCharacters: 0,
        }
      }
    },
    directives: { money3: Money3Directive }
  }
</script>

Properties

property Required Type Default Description
precision true Number 2 How many decimal places
decimal false String "." Decimal separator
thousands false String "," Thousands separator
prefix false String "" Currency symbol followed by a Space, like "R$ "
suffix false String "" Percentage for example: " %"
masked false Boolean false If the component output should include the mask or not
disable-negative false Boolean false Component does not allow negative values
disabled false Boolean false Disable the inner input tag
min false Number Number.MIN_SAFE_INTEGER The min value allowed
max false Number Number.MAX_SAFE_INTEGER The max value allowed
allow-blank false Boolean false If the field can start blank and be cleared out by user
minimum-number-of-characters false Number 0 The minimum number of characters that the mask should show

Don't want to use a package manager?

Use it directly in the browser! 

<script src="https://unpkg.com/v-money3@3.10.3/dist/v-money3.umd.js"></script>

Take a look at issue #15 and also this codesandbox working example.

References