@samirph/v-currency-field

Currency Mask for Vuetify

Features

• All features from v-money as v-text-field of vuetify.

Usage

Globally

import Vue from 'vue'
import currency from 'v-currency-field'

import 'v-currency-field/dist/index.css'

Vue.use(currency)

Example

<template>
  <div>
    <v-currency-field label="Value" v-bind="currency_config" :error-messages="errors.price" v-model="price"></v-currency-field>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        errors: {},
        price: 123.45,
        currency_config: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false,
          allowBlank: false,
          min: Number.MIN_SAFE_INTEGER,
          max: Number.MAX_SAFE_INTEGER
        }
      }
    }
  }
</script>

Properties

All v-money 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
allowBlank	false	Boolean	false	If the field can start blank and be cleared out by user
min	false	Number	Number.MIN_SAFE_INTEGER	The min value allowed
max	false	Number	Number.MAX_SAFE_INTEGER	The max value allowed

And all vuetify properties

property	Required	Type	Observation
appendOuterIcon	false	String
appendOuterIconCb	false	Function	Working but deprecated
@click:append-outer	false	Function	Not Working
autofocus	false	Boolean
box	false	Boolean
browserAutocomplete	false	String	Not Tested
clearable	false	Boolean	Not Working Event
clearIcon	false	String
clearIconCb	false	Number	Working but deprecated
@click:clear	false	Number	Not Working
color	false	String
flat	false	Boolean
fullWidth	false	Boolean
label	false	String
outline	false	Boolean
prependInnerIcon	false	String
prependInnerIconCb	false	Function	Working but deprecated
@click:prepend-inner	false	Function	Not Working
reverse	false	Boolean
singleLine	false	Boolean
solo	false	Boolean
soloInverted	false	Boolean
error-messages	false	[]
disabled	false	Boolean
readonly	false	Boolean
dark	false	Boolean
height	false	String
hint	false	String
light	false	Boolean
background-color	false	String

References

• https://github.com/64robots/v-money
• https://vuetifyjs.com/pt-BR/components/text-fields