V-MASK-DIRECTIVE-FILTER

Support to Vue 3 available here

A incredibly LIGHTER input mask directive and filter compatible with Vue 2 and Vuetify 2

Browsers support

IE / Edge	Firefox	Chrome	Chrome Android	Safari	iOS Safari	Opera
IE9>, Edge	6>	1>	18>	3.1>	2>	12>

Instalation

$ yarn add v-mask-directive-filter
 
or
 
$ npm install --save v-mask-directive-filter

Directive

// Import the directive inside your main.(js|ts)
 
import { VMaskDirective } from 'v-mask-directive-filter'
 
Vue.directive('mask', VMaskDirective)

or

// using a custom directive
 
import { getCustomMaskDirective } from 'v-slim-mask'
 
const VMASKCustomDirective = getCustomMaskDirective({
  '#': /[0-9]/,
  Z: /[a-z]|[A-Z]/,
})
Vue.directive('mask', VMASKCustomDirective)

Filter

// Import the filter inside your main.(js|ts)
 
import { VFilterDirective } from 'v-mask-directive-filter'
 
Vue.filter('mask', VFilterDirective)

Config

Tokens

Token	Pattern	Description
N	[0-9]	numbers only
S	[a-z] | [A-Z]	string a-z only
A	[0-9] | [a-z] | [A-Z]	alphanumeric only
C	[^ ]	required char
X	.*	optional char

Modifiers

Modifier	Default	Description
unmask	false	unmask the return value to the model
parseint	false	parse to int the return value to the model
init-change	false	set a initial value to the model on start
hide-on-empty	false	hide the mask if no value

Usage

Using native input element

// Inside your .vue component
 
<template>
  <input v-model="cpf" v-mask="'NNN.NNN.NNN-NN'" />
</template>
 
// Entry => 99999999999 | cpf => "999.999.999-99"

Using v-text-field of Vuetify

// Inside your .vue component
 
<template>
  <v-text-field v-mask.unmask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
</template>
 
// Entry => 83999998888 | phoneNumber => "83999998888"
 
<template>
  <v-text-field v-mask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
</template>
 
// Entry => 83999998888 | phoneNumber => "(83) 99999 - 8888"

Using vue 2.x filter

// Inside your .vue component
<span> {{ '83999998888' | mask('(NN) NNNNN - NNNN') }} </span>
 
// This will result => (83) 99999 - 8888

Using helper functions

 
<script>
  import { maskTransform, unmaskTransform } from 'v-mask-directive-filter'
  export default Vue.extends({
    computed: {
      phoneFormatted(val) {
        return maskTransform(val, '(NN) NNNNN - NNNN')
      }
    }
  })
</script>
 

Demo

vue 2.x + vuetify 2.x sample https://codesandbox.io/s/flamboyant-kilby-xv8hz