v-mask-directive-filter

A input mask directtive and filter compatible with vue 2.x|3.x and vuetify (~1.6kb)

Usage no npm install needed!

<script type="module">
  import vMaskDirectiveFilter from 'https://cdn.skypack.dev/v-mask-directive-filter';
</script>

README

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

npm version Min Min Gziped

Travis Build Known Vulnerabilities

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Chrome
Chrome Android
Safari
Safari
iOS Safari
iOS Safari
Opera
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