Super tiny input mask library for vue.js based on PureMask.js

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

Initialization

ES2015 (Webpack/Rollup/Browserify/etc)

import Vue from 'vue'

// As a plugin
import VueMask from 'v-mask'
Vue.use(VueMask);

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

UMD (Browser)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
// As a plugin
Vue.use(VueMask.VueMaskPlugin);

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

: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

GitHub