Overview
Vue Currency Input
allows an easy input of currency formatted numbers. Powered by the
Vue Composition API, it
provides a Vue composable for decorating input components with
currency format capabilities.
Simple HTML input element
<template>
<input
class="form-control form-control-solid"
ref="inputRef"
:value="formattedValue"
/>
<p class="my-5">
Number value: <code>{{ formattedValue }}</code>
</p>
</template>
<script lang="ts">
import useCurrencyInput from "vue-currency-input";
export default {
name: "CurrencyInput",
setup(props) {
const { formattedValue, inputRef } = useCurrencyInput({ currency: "EUR" });
return { inputRef, formattedValue };
},
};
</script>Usage with Element Plus
<template>
<ElInput v-model="formattedValue" ref="inputRef" />
<p class="my-5">
Number value: <code>{{ formattedValue }}</code>
</p>
</template>
<script setup lang="ts">
import { ElInput } from "element-plus"
import { useCurrencyInput } from "vue-currency-input";
const { inputRef, formattedValue } = useCurrencyInput({
currency: "CNY",
locale: "zh",
});
</script>
2025©
Keenthemes
