/ Input

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

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