# v-money

> Vue currency input/directive mask

Latest version **0.8.1** (published 2017-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-money
pnpm add v-money
yarn add v-money
bun add v-money
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.1 |
| Published | 2017-10-16 |
| First published | 2017-06-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marcos Neves |
| Maintainers | neves |
| Keywords | vue, input, mask, directive, currency, money |

## Links

- npm: https://www.npmjs.com/package/v-money
- npm.io page: https://npm.io/package/v-money

## Recent versions

- 0.8.1 (latest) — 2017-10-16
- 0.8.0 — 2017-07-20
- 0.7.0 — 2017-07-20
- 0.6.0 — 2017-07-14
- 0.5.0 — 2017-06-20
- 0.3.0 — 2017-06-12

## README

# v-money Mask for Vue.js

![The Mask Money](https://cdn-images-1.medium.com/max/600/1*Rpc289FpghuHrnzyVpOUig.gif)

## 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](https://vuejs-tips.github.io/vue-the-mask)

## Usage

### A. Globally

```js
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/

```html
<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.
```html
<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

- https://en.wikipedia.org/wiki/Decimal_mark
- https://docs.oracle.com/cd/E19455-01/806-0169/overview-9/index.html
- http://www.xe.com/symbols.php
- https://github.com/kevinongko/vue-numeric
- https://github.com/plentz/jquery-maskmoney

---
_Source: https://npm.io/package/v-money · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._