vue-currency-input

Vue Currency Input is a library that enables easy input of currency-formatted numbers using the ECMAScript Internationalization API (Intl.NumberFormat).

Key capabilities include:

• Framework Agnostic Decoration: You can decorate any existing input component (such as Vuetify, Quasar, or Element Plus) with currency formatting.
• Standard-Based: Uses Intl.NumberFormat to ensure correct locale-dependent formatting.
• Unobtrusive UX: Hides formatting on focus to allow easier editing.
• Validation: Includes built-in value range validation.
• Compatibility: Supports both Vue 2 and Vue 3 via the Vue Composition API.

Vue Currency Input does not provide a pre-built component. Instead, it provides the useCurrencyInput composable, which you use to decorate your own input components (standard HTML inputs or UI libraries like Quasar or Element Plus).

Compatibility Requirements:

• Vue 3 or Vue 2.7 are required for version 3.x.
• Nuxt 2 + Vue 2.7 is not supported.
• For Vue 2.6 or earlier, use version 2.x of the library.

To compile and minify the project for production deployment, use the build command.

yarn build

To run linting and automatically fix fixable issues in the codebase, use the lint command.

yarn lint

To create a custom component, use the useCurrencyInput composable. You must pass the component's options to the composable and bind the returned inputRef to your input element. Ensure the input element has type="text".

<template>
  <input
    ref="inputRef"
    type="text"
  />
</template>

<script>
import { useCurrencyInput } from 'vue-currency-input'

export default {
  name: 'CurrencyInput',
  props: {
    modelValue: Number, // Vue 2: value
    options: Object
  },
  setup(props) {
    const { inputRef } = useCurrencyInput(props.options)

    return { inputRef }
  }
}
</script>

The useCurrencyInput function accepts an options object to customize the behavior and appearance of the currency input. These options control everything from the currency code to how the input behaves when focused.

// Example of passing configuration to useCurrencyInput
const { inputRef } = useCurrencyInput({
  currency: 'USD',
  locale: 'en-US',
  precision: 2,
});

To compile the project and start a development server with hot-reloading enabled, use the serve command.

yarn serve

To set up the development environment for the vue2 example project, install the dependencies using yarn.

yarn install

Install the package using npm to use currency formatting in your Vue application.

npm install vue-currency-input

To update the bound value only when the input loses focus (on blur):

Vue 3: Use the .lazy modifier with v-model.

<CurrencyInput v-model.lazy="value" :options="{ currency: 'EUR' }" />

Vue 2: Since the lazy modifier is not supported on custom components with v-model, listen to the change event manually.

<CurrencyInput :value="value" :options="{ currency: 'EUR' }" @change="value = $event" />

Set the base currency and the language formatting for the input.

• currency (Required): An ISO 4217 currency code (e.g., "USD", "EUR").
• locale: A BCP 47 language tag (e.g., "en", "de-DE"). If undefined, the browser's default locale is used.

You can hide specific formatting elements when the input receives focus to simplify user input. All these default to true.

• hideCurrencySymbolOnFocus: Hides the currency symbol on focus.
• hideGroupingSeparatorOnFocus: Hides the grouping separator (e.g., thousands separator) on focus.
• hideNegligibleDecimalDigitsOnFocus: Hides negligible decimal digits on focus.