Tiny (2k gzipped) input/directive mask for currency

Related tags

Masked Input v-money
Overview

v-money Mask for Vue.js

The Mask Money

Features

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

For other types of mask, use vue-the-mask

Usage

A. Globally

import Vue from 'vue'
import money from 'v-money'

// register directive v-money and component <money>
Vue.use(money, {precision: 4})

B. Use as component: https://jsfiddle.net/auom8st8/

<template>
  <div>
    <money v-model="price" v-bind="money"></money> {{price}}
  </div>
</template>

<script>
  import {Money} from 'v-money'

  export default {
    components: {Money},

    data () {
      return {
        price: 123.45,
        money: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false
        }
      }
    }
  }
</script>

C. Use as directive: https://jsfiddle.net/nj3cLoum/2/

Must use vmodel.lazy to bind works properly.

<template>
  <div>
    <input v-model.lazy="price" v-money="money" /> {{price}}
  </div>
</template>

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

  export default {
    data () {
      return {
        price: 123.45,
        money: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false /* doesn't work with directive */
        }
      }
    },

    directives: {money: VMoney}
  }
</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

References

Comments
  • Trigger @change event

    Trigger @change event

    Hi,

    how can I make the input trigger a change event? I want to make something like this:

    <money id="val" name="val" class="form-control" v-model="val" v-bind="settings" @change="setSomethingElse"></money>
    
    
    --The javascript looks like this:
    
    val: 0,
    settings: {
                decimal: ',',
                thousands: '',
                prefix: '',
                suffix: '',
                precision: 0,
                masked: false
    },
    
    ....
    setSomethingElse(){
    // Do something here
    },
    
    

    This did not work, which I suppose is not supported right now...

    Thank you!

    opened by Arwany 11
  • How to change value programmatically?

    How to change value programmatically?

    Hi, thanks for v-money. But I've a problem. I can't change value programmatically when using as directive. I'm tried like below.

    ...
    data() {
        return {
              price: 0.0,
        };
    },
    ...
    created() {
         axios.get('blabla').then((res) => { this.price = res.price });
    },
    ...
    
    opened by murat 9
  • opinionated styles

    opinionated styles

    v-money apply style="text-align: right;" If someone need it, it can be styled very easy. But if not, it not so easy to remove this style.

    I think v-money should be about how things work, but not how things look. So I think it should be removed.

    opened by shrpne 8
  • Support storing value in minor units

    Support storing value in minor units

    Great package!

    It's often useful to represent currency values in minor units of the currency, especially because JS can behave so oddly with floating points.

    I personally prefer to store all currency values as minor units (e.g. a user will input £123.45 but I will store the value as 12345). This makes life easier if you need to manipulate the value somehow, especially interacting with another floating point value.

    Would you consider adding this functionality to this component? The option could be something like minorUnits: true. For the most part this would just involve multiplying the value by 100, though there are some currencies with non-centesimal minor units so perhaps if a non-boolean value is supplied for minorUnits option, the value would be multiplied by that number instead - useful e.g. for the Omani rial, which is divided into 1000 baisa).

    I would be happy to have a crack at a PR if you'd consider adding this.

    enhancement help wanted 
    opened by chris-jamieson 6
  • directive usage

    directive usage

    I'm trying to use v-money as directive and get error [Vue warn]: Failed to resolve directive: money I use example from docs https://github.com/vuejs-tips/v-money#c-use-as-directive-httpsjsfiddlenetauom8st8

    Also links to jsfiddle in component and directive examples are same.

    opened by shrpne 6
  • [Vue warn]: You may have an infinite update loop in a component render function.

    [Vue warn]: You may have an infinite update loop in a component render function.

    I get the following warning when using computed get and set on a component.

    [Vue warn]: You may have an infinite update loop in a component render function. found in ---> Money

    Code:

    
    <money v-model="fixedCostX"></money>
    
    computed: {
    
       fixedCostX: {
          get () {
             return this.fixedCost;
          },
          set (value) {
             this.$store.commit('updateFixedCost', {  fixedCost: value });
           }
        },
    }
    
    

    Also using Vuex.

    opened by stuartcusackie 3
  • Not working with nuxt?

    Not working with nuxt?

    HI i try to use this plugin with nuxt but when i say

    plugins/vue-money.js

    import Vue from 'vue'
    // import { VMoney } from 'vue-money'
    import money from 'vue-money'
    console.log(money)
    Vue.use(money, { precision: 4 })
    // Vue.directive('money', VMoney)
    

    nuxt.config.js

    plugins: [{ src: '~/plugins/vue-money.js' }],
    

    Directive is not defined and component are not registerd

    i tried in

    i dont know where the problem is on nuxt side or on this component :P Solved i installed vue-money and not v-money

    opened by cannap 3
  • on input:focus bug?

    on input:focus bug?

    hey,

    testet the demo: https://jsfiddle.net/auom8st8/ if we click in the input the cursor jumps to the last position.

    is this a feature or bug?

    regards

    opened by nmkr 3
  • Globally Usage

    Globally Usage

    I am trying to use directive globaly.

    Vue.use(money, {precision: 4});

    <input v-model.lazy="price" v-money />

    And I got the error:

    Error in directive money bind hook: "TypeError: Cannot convert undefined or null to object"

    opened by gabrielpeixoto 3
  • Update values of child component with v-money

    Update values of child component with v-money

    Hello everyone

    I’m a Vue newbie and trying to create a webapp to calculate the income and expenses (budget planner). I use a component with a loop to create the necessary fields. And below there’s a field where I want to calculate the sum of all fields. But I fail to get it to work. I think because the values don’t get updated. The initial values (in data.js) may be not needed, because in the end the initial values will always be zero (the two current values are for testing).

    Here you can see simplified app with the problem: codesandbox.io/s/v-money-component-test-mltp6

    How can I update the sum, when a value is changed? Thanks for you help.

    opened by Macfuture 2
  • Instead of blank fields being 0, can they be blank?

    Instead of blank fields being 0, can they be blank?

    I have added a short circuit on format() and unformat() to return the input as an empty string if that's what it is. The current behavior changes empty string '' into 0. I can do a PR if this is a desired feature.

    opened by andrewevans 2
  • How to override global options

    How to override global options

    I'm trying to use v-money globally as a directive, so i followed the documentation, and added the following snipet:

    import money from 'v-money'; Vue.use(money, { prefix: "R$", decimal: ",", thousands: "." });

    I can use the directive this way: v-money={}

    But the options that i setup globally are no reflected, the configs remain with the default, wich is decimals = . and thousands = , The only way it worked correctly was setting up in my vue component, like: v-money={ prefix: "R$", decimal: ",", thousands: "." }

    Has anyone had this problem? how to solve?

    opened by pm-ribeiro 0
  • Error on null value and do not return Empty String

    Error on null value and do not return Empty String

    Hi, When v-model is null, the component will throw Error that e in null, I think it's better to replace null into empty String automaticlly. Also we remove every number in input, It return a '0' String that is not correct. It will better to return empty String as we need.

    opened by esamani77 2
  • toFixed(x) for non-masked values

    toFixed(x) for non-masked values

    It'd be nice to have `:fixed="2" for example for non-masked values cuz sometimes we need the zeroes in rounded values so it would bring the output like x.toFixed(fixValue).

    Of course we can be workarounded if someone needs it but I feel that would be a nice feature for this excellent component.

    opened by FabioCaue 1
  • Having numbers in suffix property it gives me an infinite loop

    Having numbers in suffix property it gives me an infinite loop

    When having numbers in suffix property it gives me an infinite loop. Is there a way to escape it ?

    <input
    v-money="max_size !== null ? decimal_mask : null"
    >
    
    decimal_mask: {
    	decimal: ',',
    	thousands: '.',
    	prefix: '',
    	suffix: ' m2',
    	precision: 0,
    	masked: false /* doesn't work with directive */
    },
    

    I get: [Vue warn]: You may have an infinite update loop in a component render function.

    opened by diogopublio 2
  • How to associate with a label?

    How to associate with a label?

    I am using the component globally, but i can't associate the component with a label like this, for example:

    How could i associate the created input with a label?

    opened by edsonfeimberg 1
Owner
Vue.js Tips
Learn Vue.js by building real world components
Vue.js Tips
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 34 Sep 24, 2022
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
🔡 Tiny input mask library for Vue.js (directive)

?? Tiny input mask library for Vue.js (directive)

Max Liashuk 824 Sep 24, 2022
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Text Mask 8.2k Sep 30, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Alexander Shabunevich 451 Oct 6, 2022
vue-r-mask - Directive with template similar to javascript regular expression.

vue-r-mask mask directive for vue.js Template similar to javascript regular expression. /\d{2}/ Directive useful for your own input or textarea. Arbit

null 22 May 1, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
Easy input of currency formatted numbers for Vue.js.

Vue Currency Input The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (<currenc

Matthias Stiller 456 Oct 2, 2022
The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. You can use patterns like: <input type="text" v-ma

Wirecard Brasil 164 Aug 3, 2022
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Ankur Kumar 19 Mar 4, 2022
Vue-money-format: A lightweight display component for localized currency display

This is a lightweight display component for localized currency display. It has no dependencies other than Vue. It supports both float and integer input, and can adjust for values stored as decimal-based subunits, such as cents, dirham, groszy, etc. Storing currency values in terms of the subunit allows you to store integers, rather than floating numbers, which ensures accuracy.

null 15 Sep 22, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Nicolas Del Valle 14 Sep 15, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
An ip input implament by vuejs

vue-ip-input An ip input implement by vue 2.0 Demo Demo Usage Install npm install vue-ip-input --save CommonJS var VueIpInput = require('vue-ip-input'

LinBin 25 Nov 8, 2021
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 14 Jul 24, 2022
IP Address input for VueJS 2.x

Vue IP A IP input component built for Vue 2.x Demo Install $ yarn add vue-ip Usage import VueIp from 'VueIp'; new Vue({ components: { Vue

Peter Ingram 25 Nov 9, 2021