vue-currency-input

Easy input of currency formatted numbers for Vue.js.

Usage no npm install needed!

<script type="module">
  import vueCurrencyInput from 'https://cdn.skypack.dev/vue-currency-input';
</script>

README

Build Status codecov Codacy Badge npm version Bundlephobia License

Vue Currency Input

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.

Features

  • 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

Live Demo

Check out the playground to see it in action.

Quick Start

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>

Documentation

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

Support me

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

ko-fi