Vue-Currency-Text

Um componente de moeda com as funcionalidades do v-text-field. O componente é compatível com Vuetify 3.x. Ele utiliza a biblioteca v-money3 para garantir que os valores sejam exibidos e manipulados corretamente.

Install

NPM

Para usar o componente em seu projeto Vue 3, instale o pacote via NPM:

1npm install v-currency-text 

Uso

No seu projeto Vue, importe e registre o componente:

1import { createApp } from 'vue';
2import App from './App.vue';
3import vuetify from './plugins/vuetify';  // if you are already using Vuetify 
4import VCurrencyText from 'v-currency-text';
5
6const app = createApp(App);
7
8app.use(vuetify);
9app.component('VCurrencyText', VCurrencyText);
10app.mount('#app');

Exemplo de Uso

Você pode usar o componente da seguinte maneira:

1<template>
2<v-currency-text
3v-model="value"
4name="value"
5prefix="R$"
6density="compact"
7variant="outlined"
8:value="value"
9@update="v => value = v"
10ref_currency="value"
11id="value"
12label="Value"
13v-bind="precision"
14hide-details
15/>
16</template>
17
18<script>
19export default {
20data() {
21return {
22value: 0, 
23  precision: {
24      decimal: ',',
25      thousands: '.',
26      prefix: '',
27      suffix: '',
28      precision: 2,
29      masked: false,
30      allowBlank: false,
31      min: Number.MIN_SAFE_INTEGER,
32      max: Number.MAX_SAFE_INTEGER
33    },
34}; 
35},
36};
37</script>

Props

• name: Define o nome do campo, usado em formulários.
• prefix: Prefixo da moeda (Ex: "R$").
• density: Define a densidade do campo, controlando o espaçamento. (Ex: "compact", "default").
• variant: Estilo do campo. (Ex: "outlined", "filled").
• value: O valor atual do input.
• @update: Evento emitido quando o valor muda, retornando o novo valor.
• ref_currency: Referência interna para o campo monetário.
• id: ID do elemento, útil para associar labels ou acessibilidade.
• label: Texto que será exibido como rótulo do campo.
• v-bind: Usado para passar configurações adicionais, como precisão (decimal).
• hide-details: Oculta detalhes adicionais do campo, como mensagens de erro.

Props

O componente aceita as seguintes propriedades:

Nome	Tipo	Padrão	Descrição
id	String	'textField'	Identificador único do campo.
prefixo	String	''	Prefixo a ser exibido antes do valor.
sufixo	String	null	Sufixo a ser exibido após o valor.
density	String	'compact'	Densidade do campo.
variant	String	'outlined'	Variantes de estilo do campo.
disabled	Boolean	false	Define se o campo está desabilitado.
readonly	Boolean	false	Define se o campo é somente leitura.
value	String	Number	''
precision	Object	Configurações padrão para formatação monetária.	Especificações de formatação.
locale	String	'pt-BR'	Define a localidade para formatação.
currency	String	'BRL'	Código da moeda a ser usada.

Events

• @update: Emite o novo valor monetário sempre que o campo for alterado.

Slots

Este componente atualmente não utiliza slots.

Referências

• https://github.com/jonathanpmartins/v-money3 (based on v-money)