Vue Input Mask Component – v-mask


v-mask is a simple input mask lib for vue.js based on text-mask-core.

Basic usage:

1. Install and import the v-mask.

import Vue from 'vue'
import VueMask from 'v-mask'
// as a plugin

// as a directive
import { VueMaskDirective } from 'v-mask'
Vue.directive('mask', VueMaskDirective);

// as a filter
import { VueMaskFilter } from 'v-mask'
Vue.filter('VMask', VueMaskFilter)

2. Apply a custom mask to input field.

  <input type="text" v-mask="'####-##'" v-model="myInputModel">

3. Default placeholders.

  • #: Number (0-9)
  • A: Letter in any case (a-z,A-Z)
  • N: Number or letter (a-z,A-Z,0-9)
  • X: Any symbol
  • ?: Optional (next character)




v2.3.0  (09/27/2020)

  • filter: make filter work with RegExps, functions and respect custom replacers similarly to directive

v2.2.4 (01/24/2020)

  • filter: prevent crashes for null values, cover filter by tests

v2.2.3 (07/22/2020)

  • mask: allow any input for falsy mask

v2.2.1 (06/17/2020)

  • Fixed regexp mask array is not working in v2.2.0

Download Details:

Author: probil

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install v-mask

You Might Be Interested In:

Add Comment