The Mask

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

Docs and Demo

JsFiddle

Install

yarn add vue-the-mask
or
npm i -S vue-the-mask

Usage (two flavors)

Global

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

Local (inside the component)

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

Local (as directive)

import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}

Tokens

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

Properties

| Property | Required | Type | Default | Description | |-------------|----------|-------------------------|---------|--------------------------------------------| | value | false | String | | Input value or v-model | | mask | true | String, Array | | Mask pattern | | masked | false | Boolean | false | emit value with mask chars, default is raw | | placeholder | false | String | | Same as html input | | type | false | String | 'text' | Input type (email, tel, number, ...) | | tokens | false | Object | tokens | Custom tokens for mask |

What about money?

We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money

Other Solutions

1. https://github.com/nosir/cleave.js
2. https://github.com/text-mask/text-mask
3. https://github.com/igorescobar/jQuery-Mask-Plugin
4. https://github.com/fernandofleury/vanilla-masker
5. https://github.com/angular-ui/ui-mask
6. https://github.com/insin/inputmask-core
7. https://github.com/niksmr/vue-masked-input
8. https://github.com/probil/v-mask
9. https://github.com/moip/awesome-mask
10. https://github.com/the-darc/string-mask
11. https://github.com/romulobrasil/PureMask.js
12. https://github.com/devindex/vue-mask

Currency

1. https://github.com/vuejs-tips/v-money
2. https://github.com/plentz/jquery-maskmoney
3. https://github.com/flaviosilveira/Jquery-Price-Format
4. https://github.com/kevinongko/vue-numeric

Suggest another one here

Contribution

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame ;)

License

This project is licensed under MIT License