Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,965
vue (4,211
i18n (223