Tiny input mask library for vue.js based on text-mask-core (~4kb) exposed as directive. No dependencies
- https://codesandbox.io/s/m3q1m5yp9x (interactive playground with webpack and ESM)
- https://jsfiddle.net/probil/c6fjjzn6/ (simple interactive playground with UMD)
- https://v-mask-demo.netlify.com/ (just preview)
 |
 |
 |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|
| 74+ ✔️ | 66+ ✔️ | 12+ ✔️ | 46+ ✔️ | 17+ ✔️ | 11+ ✔️ | 12+ ✔️ | 67+ ✔️ | 8.2+ ✔️ |
We support only browsers with global usage statistics greater then 1%, last 2 version of each browser but not dead browsers. Library may work in older browser but we don't not guarantee that. You may need addition polyfills to make it work.
This version requires Vue 2.X. If you are looking for Vue 1.X, check it here.
npm install v-maskimport 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);<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><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.
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) |
Jest is used for unit-tests.
Unit-tests can be executed by typing this command in your terminal:
npm testTestCafe is used of E2E testing.
E2E-tests can be executed by typing this command in your terminal:
npm test:e2eThis plugin follows semantic versioning.
We're using GitHub Releases.
We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.
Notice: You should make your changes only in src folder, don't try to edit files from dist as it compiled from src by babel and shouldn't be changes manually.
See the LICENSE file for license rights and limitations (MIT).