Currency Input

Live-formatting currency input. Formats as you type with configurable decimal, thousands separator, prefix, suffix, and precision.

v-model:

<script setup>
const amount = ref(null)
</script>

<template>
  <VxCurrencyInput
    v-model="amount"
    :options="{ prefix: '$ ', thousands: ',', decimal: '.', precision: 2 }"
  />
  <!-- Type: 1234567 → displays: $ 1,234,567.00 -->
  <!-- v-model: 1234567 (number) -->
</template>

Dollar Format

1234567.89

<template>
  <!-- $ 1,234,567.89 -->
  <VxCurrencyInput :options="{ prefix: '$ ', thousands: ',', decimal: '.', precision: 2 }" />
</template>

Euro Format

50000

<template>
  <!-- 50.000,00 € -->
  <VxCurrencyInput :options="{ suffix: ' €', thousands: '.', decimal: ',', precision: 2 }" />
</template>

Space as Thousands Separator

9999.99

<template>
  <!-- 9 999.99 -->
  <VxCurrencyInput :options="{ thousands: ' ', decimal: '.', precision: 2 }" />
</template>

UZS (no decimals, space separator)

1500

<template>
  <!-- 1 500 sum -->
  <VxCurrencyInput :options="{ suffix: ' sum', thousands: ' ', precision: 0 }" />
</template>

RUB Format

42000

<template>
  <!-- 42 000,00 ₽ -->
  <VxCurrencyInput :options="{ suffix: ' ₽', thousands: ' ', decimal: ',', precision: 2 }" />
</template>

Prefix + Suffix

250.5

<template>
  <!-- USD 250 .00 -->
  <VxCurrencyInput :options="{ prefix: 'USD ', suffix: ' .00', thousands: ',', precision: 0 }" />
</template>

Clearable

<template>
  <VxCurrencyInput v-model="amount" :options="{ prefix: '$ ' }" clearable />
</template>

Sizes

<template>
  <VxCurrencyInput size="sm" />
  <VxCurrencyInput />
  <VxCurrencyInput size="lg" />
</template>

Allow Negative

<template>
  <VxCurrencyInput allow-negative />
</template>

Options Reference

Key	Type	Default	Description
decimal	string	'.'	Decimal separator character
thousands	string	','	Thousands separator (use ' ' for space)
prefix	string	''	Prefix text (e.g. '$ ', '€ ')
suffix	string	''	Suffix text (e.g. ' USD', ' sum', ' ₽')
precision	number	2	Number of decimal places
masked	boolean	false	If true, v-model returns formatted string

Props

Prop	Type	Default	Description
modelValue	number | string | null	null	Value (v-model)
options	CurrencyOptions	{}	Formatting options (see above)
placeholder	string	'0.00'	Placeholder
disabled	boolean	false	Disable
readonly	boolean	false	Read only
clearable	boolean	false	Clear button
size	'sm' | 'default' | 'lg'	'default'	Size
allowNegative	boolean	false	Allow negative values

Events

Event	Type	Description
update:modelValue	(v: number | string | null)	Value changed
change	(v: number | null)	Value changed on blur
focus	(e: FocusEvent)	Focused
blur	(e: FocusEvent)	Blurred