The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (<currency-input>) and a custom Vue directive (v-currency) for decorating existing input components with currency format capabilities.

• Tiny bundle size and zero dependencies
• Format as you type
• Locale dependent, ISO-compliant currency formatting based on Intl.NumberFormat
• Distraction free (hides the formatting on focus for easier input)
• Allows handling values as integer numbers for full precision
• Auto decimal mode (automatically inserts the decimal symbol, using the last inputted digits as decimal digits)
• Built-in value range validation
• Works with input components of popular frameworks like Vuetify or Element

Check out the playground to see it in action.

Install the npm package:

npm install vue-currency-input 
# OR 
yarn add vue-currency-input

Add the Vue plugin in your main.js:

import Vue from 'vue'
import VueCurrencyInput from 'vue-currency-input'

Vue.use(VueCurrencyInput)

Use the <currency-input> component:

<template>
  <currency-input v-model="value" />
</template>

<script>
export default {
  data: () => ({ value: 1000 })
}
</script>

Please refer to the project home page for a detailed documentation.

If you find this plugin helpful or you want to support the development, buy me a coffee: