Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 40 Commits
dist		dist
docs		docs
src		src
tests		tests
.babelrc		.babelrc
.gitignore		.gitignore
README.md		README.md
build.config.js		build.config.js
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

v-money Mask for Vue.js

Features

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

For other types of mask, usevue-the-mask

Usage

A. Globally

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

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

<template><div><moneyv-model="price"v-bind="money"></money> {{price}}</div></template><script>import{Money}from'v-money'exportdefault{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 usevmodel.lazy to bind works properly.

<template><div><inputv-model.lazy="price"v-money="money"/> {{price}}</div></template><script>import{VMoney}from'v-money'exportdefault{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