vuetify-money

If you use Vuejs with Vuetify 2.x and you need a component to work with money format, maybe this can help you.

v-text-field: R$ 12.345.678,90

v-model: 12345678.90

Dependency

• VueJS
• Vuetify 2.x

Links

See DEMO here

GitHub

npm

Install

$ npm install vuetify-money --save

Register component:
1- Create a src/plugins/vuetify-money.js file with the following content:
import Vue from "vue";
import VuetifyMoney from "vuetify-money";
Vue.use(VuetifyMoney);
export default VuetifyMoney;

2- Add file to src/main.js:
import "./plugins/vuetify-money.js";

Parent component:
<template>
  <div>
    <vuetify-money
      v-model="value"
      v-bind:label="label"
      v-bind:placeholder="placeholder"
      v-bind:readonly="readonly"
      v-bind:disabled="disabled"
      v-bind:outlined="outlined"
      v-bind:clearable="clearable"
      v-bind:valueWhenIsEmpty="valueWhenIsEmpty"
      v-bind:options="options"
      v-bind:properties="properties"
    />
    Parent v-model: {{ value }}
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1234567.89",
    label: "Value",
    placeholder: " ",
    readonly: false,
    disabled: false,
    outlined: true,
    clearable: true,
    valueWhenIsEmpty: "",
    options: {
      locale: "pt-BR",
      prefix: "R$",
      suffix: "",
      length: 11,
      precision: 2
    },
    properties: {
      hint: "my hint"
      // You can add other v-text-field properties, here.
    },
  })
};
</script>

Properties

Property	Type	Default	Description
label	String	“”	v-text-field property
placeholder	String	undefined	v-text-field property
readonly	Boolean	false	v-text-field property
dense	Boolean	false	v-text-field property
error	Boolean	false	v-text-field property
hideDetails	Boolean	false	v-text-field property
rules	Array or String	[]	v-text-field property
disabled	Boolean	false	v-text-field property
outlined	Boolean	false	v-text-field property
clearable	Boolean	false	v-text-field property
backgroundColor	String	white	v-text-field property
valueWhenIsEmpty	String	“”	value when TextField is empty. Ex: 0, “”, null

*** If you need to use other v-text-field properties, you can add them in properties object.

Options

Option	Type	Default	Description
locale	String	pt-BR	Locale to format number
prefix	String	“”	Currency symbol
suffix	String	“”	% or others
length	Number	11	Number length
precision	Number	2	Decimal precision

Option	Type	Default	Description
min	Number	0	Value min
minEvent	String	0	Custom event name
max	Number	-	Value max
maxEvent	String	-	Custom event name