Vue Currency Input

Guide

Version

You’re browsing the documentation for v2.x. For v1.x, click here.

Introduction

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.

Installation

Install the npm package:

npm install vue-currency-input@next

For usage with Vue 2 you have to install also the @vue/composition-api package:

npm install @vue/composition-api

Usage

Vue Currency Input does not provide a ready-to-use component, instead it enables you to create your own based on your favorite input component (for example Vuetify, Quasar or Element).

Creating a custom component

The following example component <currency-input> uses a simple HTML input element:

<template>
  <input 
    ref="inputRef" 
    :value="formattedValue"
  >
</template>

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

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

    return { inputRef, formattedValue }
  }
}
</script>

Component Props

The component should provide props for the v-model value binding, and the options (see Config Reference).

Input Type

Make sure, that the input element has type text (or omit the type since it's the default).

Use the custom component

Now you can use the created <currency-input> component in your app:

<template>
  <currency-input 
    v-model="value" 
    :options="{ currency: 'EUR' }"
  />
</template>

<script>
import CurrencyInput from './CurrencyInput'

export default {
  name: 'App',
  components: { CurrencyInput },
  data: () => ({ value: 1234 })
}
</script>

Lazy value binding

Sometimes you might want to update the bound value only when the input loses its focus. In this case, use v-model.lazy for Vue 3. For Vue 2 listen to the change event instead of using v-model, since the lazy modifier is not supported when using v-model on custom components.

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

<script>
import CurrencyInput from './CurrencyInput'

export default {
  name: 'App',
  components: { CurrencyInput },
  data: () => ({ value: 1234 })
}
</script>

External props changes

If the value of the input is changed externally (and not only by user input) you need to use the setValue function returned by useCurrencyInput within a watcher.

The same applies for the options of your currency input component. Use the setOptions function in a watcher in order to make the options reactive for changes after the component has been mounted (like in the Playground).

<template>
  <input 
    ref="inputRef" 
    :value="formattedValue"
  >
</template>

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

export default {
  name: 'CurrencyInput',
  props: {
    modelValue: Number,
    options: Object
  },
  setup (props) {
    const {
      inputRef,
      formattedValue,
      setOptions,
      setValue
    } = useCurrencyInput(props.options)

    watch(() => props.modelValue, (value) => {
      setValue(value)
    })

    watch(() => props.options, (options) => {
      setOptions(options)
    })

    return { inputRef, formattedValue }
  }
}
</script>