Vue input format directive
Tiny input format library for vue.js based on cleave.js
Why?
The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.
However, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.
Installation
npm i @42sol/v-format
# or
yarn add @42sol/v-format
Initialization
import Vue from 'vue';
// As plugin (globally)
import VueFormat from '@42sol/v-format';
Vue.use(VueFormat);
// Or as a global directive
import { VueFormatDirective } from '@42sol/v-format'
Vue.directive('format', VueFormatDirective);
// Or as a component directive
import { VueFormatDirective } from '@42sol/v-format'
export default {
directives: {
format: VueFormatDirective
}
}
Usage
<input type="text" v-model="value" v-format="{ creditCard: true }">
<!-- OR -->
<input type="text" v-model="value" v-format="variableWithOptions">
<!-- OR -->
<input type="text" v-model="value" v-format="'numeral'">
<!-- OR -->
<InputComponent v-model="value" v-format="{ selector: '.innerInput', creditCard: true }" />
Configuration
All directive options must match cleave.js options. See official documentation for details.
Input selector
You can pass selector option to query nested <input>
element.
This can be helpful in components with difficult structure.
Default selector is 'input'
.