Guide

Introduction

The Vuetify Currency Field uses Vue Currency Input directive to create a currency component (<v-currency-field>) with all features of v-text-field. The component is compatible with vuetify 1.x and 2.x and dynamic binds the props and listeners to v-text-field component.

Installation

Install the npm package:

npm install v-currency-field 
# OR 
yarn add v-currency-field

Vue Cli

No Treeshaking

Registry <v-currency-field> component globally in your main.js:

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

Vue.use(VCurrencyField, { 
	locale: 'pt-BR',
	decimalLength: 2,
	autoDecimalMode: true,
	min: null,
	max: null,
	defaultValue: 0,
    valueAsInteger: false,
    allowNegative: true
})

Treeshaking

Registry <v-currency-field> and <v-text-field> component globally in your main.js:

import Vue from 'vue'
import VCurrencyField from 'v-currency-field'
import { VTextField } from 'vuetify/lib'  //Globally import VTextField

Vue.component('v-text-field', VTextField)
Vue.use(VCurrencyField, { 
	locale: 'pt-BR',
	decimalLength: 2,
	autoDecimalMode: true,
	min: null,
	max: null,
	defaultValue: 0,
    valueAsInteger: false,
    allowNegative: true
})

With treeshaking enabled, webpack don't reconize v-text-field inside v-currency-field component. That's why is necessery registry <v-text-field> globally.

Nuxt

No Treeshaking

Configure @nuxtjs/vuetify with no TreeShaking:

{
  buildModules: [
    ['@nuxtjs/vuetify']
  ]
}

Add v-currency-field/nuxt to the modules section of nuxt.config.js:

{
  modules: [
  	['v-currency-field/nuxt', {
      locale: 'pt-BR',
      decimalLength: 2,
      autoDecimalMode: true,
      min: null,
      max: null,
      defaultValue: 0,
      valueAsInteger: false,
      allowNegative: true
    }]
  ]
}

Treeshaking

Configure @nuxtjs/vuetify with TreeShaking:

{
  buildModules: [
    ['@nuxtjs/vuetify', {treeShake: true}]
  ]
}

Add v-currency-field/nuxt-treeshaking to the modules section of nuxt.config.js:

{
  modules: [
    ['v-currency-field/nuxt-treeshaking', {
      locale: 'pt-BR',
      decimalLength: 2,
      autoDecimalMode: true,
      min: null,
      max: null,
      defaultValue: 0,
      valueAsInteger: false,
      allowNegative: true
    }],
  ]
}

Direct download via CDN

If you don't use a module system you can also download the plugin as UMD bundle via CDN. Include the plugin after Vue and it will install itself automatically:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/v-currency-field"></script>

Usage

Component

The <v-currency-field> component works with all <v-text-field> props. All currency props are optional.

<template>
  <v-currency-field 
  label="Rate" 
  :error-messages="errors.rate"
  filled
  v-model="rate"/>
</template>

<script>
export default {
  data: () => ({
    rate: 0,
    errors: {}
  })
}
</script>