Guide

Introduction

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.

Installation

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'

const pluginOptions = {
  /* see config reference */
  globalOptions: { currency: 'USD', ... }
}
Vue.use(VueCurrencyInput, pluginOptions)

Nuxt

Add vue-currency-input/nuxt to the modules section of nuxt.config.js:

{
  modules: [
    'vue-currency-input/nuxt',

    // Or with plugin options:
    ['vue-currency-input/nuxt', { globalOptions: { currency: 'USD', ... }]
  ]
}

Direct download via CDN

If you don't use a module system you can also download the plugin as UMD bundle via CDN. Include the plugin after Vue, and it will install itself automatically:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-currency-input"></script>

Try it on CodeSandbox (opens new window)

Usage

Component

The <currency-input> component only needs a number value binding. All other component props are optional.

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

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

Lazy value binding

Sometimes you might want to update the bound value only when the input loses its focus. In this case, listen to the change event instead of using v-model.

<template>
  <currency-input
    :value="value"
    @change="value = $event"
  />
</template>

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

Directive

The v-currency directive is great if you want to decorate existing input components with currency format capabilities (for example like those from Vuetify (opens new window) or Element (opens new window)).

<template>
  <input
    v-model="value"
    v-currency="{currency: 'USD', locale: 'en'}"
  >
</template>

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

Getting the number value

In comparison to the <currency-input> component the v-currency directive always emits the formatted string instead of the number value when used with v-model. To get the number value you can either use parse or getValue.

Import on demand

You can also import the component/directive on demand and register them locally in your Vue files. This is useful if you want to use async components (opens new window).

Component

<template>
  <currency-input :value="1000"/>
</template>

<script>
import { CurrencyInput } from 'vue-currency-input'
export default {
  components: { CurrencyInput }
}
</script>

Directive

<template>
  <input v-currency/>
</template>

<script>
import { CurrencyDirective } from 'vue-currency-input'
export default {
  directives: {
    currency: CurrencyDirective
  }
}
</script>