mibsbalsante / vuetify-money-3

vuetify-money for vuetify 3

vuetify-money-3

This is a fork from vuetify-money updated to work with Vuetify 3.x and Vue 3.x. Please refer to the original project if you need Vue 2.x compatibility.

v-text-field: R$ 12.345.678,90

v-model: 12345678.90

Dependency

• VueJS
• Vuetify 3.x

Install

Only available installing with GitHub repo

$ npm install github:mibsbalsante/vuetify-money-3

Register the component globally in your main.js file:

import VuetifyMoney from "vuetify-money-3";
app.use(VuetifyMoney);

Or import locally as a component:

import { VuetifyMoney } from "vuetify-money-3";

export default {
  props: {},
  components: { VuetifyMoney },
  render: () => {}
};

How to use

<template>
  <vuetify-money
    v-model="value"
    :label="label"
    :placeholder="placeholder"
    :readonly="readonly"
    :disabled="disabled"
    :variant="variant"
    :clearable="clearable"
    :valueWhenIsEmpty="valueWhenIsEmpty"
    :options="options"
    :properties="properties"
  />
  Parent v-model: {{ value }}
</template>
<script>
  export default {
    data: () => ({
      value: "1234567.89",
      label: "Value",
      placeholder: " ",
      readonly: false,
      disabled: false,
      variant: "outlined",
      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
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
variant	String	filled	v-text-field property
density	String	default	v-text-field property
clearable	Boolean	false	v-text-field property
bgColor	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