Money component for vuetify 2.x.
npm install vuetify-moneyIf 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
$ npm install vuetify-money --saveRegister 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:
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 }}
| 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.
| 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 |