Vue Input Mask Component – v-mask

Install & Download:

$ npm install v-mask

Description:

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
Vue.use(VueMask);
// 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.

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

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)

Preview:

Changelog:

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