Vue Formulate Currency

Vue Formulate Currency allows for better currency input formatting.

Install

npm install vue-formulate-currency

Usage

Add to your vue formulate plugins. Documentation

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

import FormulateVueCurrencyPlugin from 'vue-formulate-currency'

Vue.use(VueFormulate, {
    plugins: [ FormulateVueCurrencyPlugin ]
})

For Nuxt.js ♥ add the plugin to your formulate.config.js file. Documentation

Component Usage

Add the currency type to a formulate component

<FormulateInput  type="currency"/>

| Prop |Value Example|Default Value | |--|--|--| | currencyPrefix| "$"|"" | emptyValue| "Empty!"|"" | currencySymbolPosition| "prefix"|"prefix" or "suffix" | placeholder| "Im a placeholder!"|"" | precision| 0|2 | separator| "-"|"," | outputType| "string"|"number"

Special Props : styling✨

The styling prop is optional and can be used to add in classes to your input. It accepts and array of classes or a string and will be combined with the formulate configuration classes set in your project.

Duplicate classes are always removed.

<FormulateInput  type="currency"  currencyPrefix="$" :styling="['border-2', 'border-blue-gray-200']"/>

or using a string...

<FormulateInput  type="currency"  currencyPrefix="$" :styling="border-2 border-blue-gray-200"/>