Documentation v1.1.0

Preview

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>
Preview Get Help Buy Now