Vue Currency Input

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

Table of contents

• Browser Support
• Demo
• Features
• Getting started
• Usage
• Available Props
• Methods
• Directive options
• Want to Contribute?
• Need Help / Support?
• Collection of Other Components
• Changelog
• Credits
• License
• Keywords

Browser Support

83.0 ✔	77.0 ✔	13.1.1 ✔	83.0 ✔	11.9 ✔

Demo

Features

• Format as you type
• Locale dependent, ISO-compliant currency formatting
• Distraction free (hides the formatting on focus for easier input)
• Customizable currency symbols and precision ranges
• Built-in value range validation
• Works with input components of popular frameworks like Vuetify or Element)

Getting started

Install the npm package:

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

Usage

Add the Vue plugin in your main.js:

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

Vue.use(VueCurrencyInput)

Use the component:

<template>
  <div>
  <currency-input v-model="value" currency="INR" locale="en-IN"/>
  div>
template>

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