vue-money-input

Custom Vue 3 money input component and directive supporting masking, lazy updates, prefix/suffix, and SVG slots.

Features

• Vue 3 component & directive for money/currency input
• Supports v-model and v-model.lazy binding
• Configurable precision, decimal separator, and thousands separator
• Supports prefix and suffix (text or SVG via slots)
• Supports masked (formatted) or raw value binding
• Directive usage supports .lazy modifier and masking options
• Easy global or local registration

Installation

npm install vue-money-input

Usage

Component Usage

<template>
  <VueMoneyInput
    v-model.lazy="amount"
    :precision="2"
    decimal="."
    thousands=","
    prefix="$"
    suffix=" USD"
    :masked="true"
    :lazy="true"
    placeholder="Enter amount"
  >
    <template #prefix>
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-3 0-3 4-3 4h6s0-4-3-4z"></path>
      </svg>
    </template>
    <template #suffix>
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
      </svg>
    </template>
  </VueMoneyInput>

  <p>Model value: {{ amount }}</p>
</template>

<script setup>
import { ref } from 'vue'
import { VueMoneyInput } from 'vue-money-input'

const amount = ref('1234.56')
</script>

Directive Usage

<template>
  <input
    v-model.lazy="amount"
    v-money="{ decimal: '.', thousands: ',', precision: 2, prefix: '$', suffix: ' USD', masked: true }"
    placeholder="Enter amount"
  />
  <p>Model value: {{ amount }}</p>
</template>

<script setup>
import { ref } from 'vue'
import { VMoney } from 'vue-money-input'

const amount = ref('1234.56')
</script>

Global Registration

import { createApp } from 'vue'
import App from './App.vue'
import { VueMoneyInput, VMoney } from 'vue-money-input'

const app = createApp(App)
app.component('VueMoneyInput', VueMoneyInput)
app.directive('money', VMoney)
app.mount('#app')

Props and Options

| Prop | Type | Default | Description | |------------|---------|---------|-----------------------------------------------| | modelValue | String/Number | '' | Bound value | | precision | Number | 2 | Number of decimal places | | decimal | String | '.' | Decimal separator character | | thousands | String | ',' | Thousands separator character | | prefix | String | '' | Prefix text (use slots for SVG) | | suffix | String | '' | Suffix text (use slots for SVG) | | masked | Boolean | true | Whether to emit formatted (masked) value or raw | | lazy | Boolean | false | Whether to update model only on blur (lazy) | | placeholder| String | '' | Input placeholder text |

License

MIT