Tiny Input Mask Library For Vue.js – Input Facade


Input Facade is a lightweight input mask component/directive to mask your input fields using custom rules.

How to use it:

1. Import and register the component.

import InputFacade from 'vue-input-facade'
// or
import { InputFacade, facade, filter } from 'vue-input-facade'
export default {
  components: { InputFacade },
  directives: { facade },
  filters: { facade: filter },

2. Insert the input mask component into the template and define your own rules using the following tokens.

  • S = alpha characters
  • # = numerical characters
  • X = alpha numerical characters
  • A = alpha characters, transformed to uppercase
  • a = alpha characters, transformed to lowercase
  • \ = escape any of the above characters
<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />

3. Or use it as a directive.

<input type="text" type="tel" v-facade="'(###) ###-####'" />


Tiny Input Mask Library For Vue.js - Input Facade


v1.3.4 (05/09/2021)

  • Fixed: assume insertText if event.inputType is unsupported

v1.3.3 (04/28/2020)

  • fixed firefox issue where masked value can overflow

v1.3.2 (07/30/2020)

  • avoid emitting input event if initial value is null

v1.3.1 (06/18/2020)

  • Fixed mask on 2nd input event from vuetify in firefox

Download Details:

Author: RonaldJerez

Live Demo: https://ronaldjerez.github.io/vue-input-facade/

Download Link: https://github.com/RonaldJerez/vue-input-facade/archive/master.zip

Official Website: https://github.com/RonaldJerez/vue-input-facade

Install & Download:

# Yarn
$ yarn add vue-input-facade

$ npm install vue-input-facade --save

You Might Be Interested In:

Add Comment