Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

:cd: Installation

This version requires Vue 2.X. If you are looking for Vue 1.X, check it here.

npm install v-mask


ES2015 (Webpack/Rollup/Browserify/etc)

import Vue from 'vue'

// As a plugin
import VueMask from 'v-mask'

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

UMD (Browser)

<script src=""></script>
<script src=""></script>
// As a plugin

// Or as a directive
Vue.directive('mask', VueMask.VueMaskDirective);

:rocket: Usage

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

Notice: v-model is required starting from v1.1.0, because a lot of bugs with HTMLElement event listeners and sync with Vue internals.

There is no reason to support using this lib for using without v-model but open the door for using on custom inputs.

:gear: Configs

List of supported placeholders:

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

:syringe: Tests

Jest is used for unit-tests.

You can run tests by typing this command in your console:

npm test

Nightwatch is used of E2E testing.

Check the v-mask--demo repo for more details