Tiny (2KB) and dependency free mask input for Vue.js

Usage no npm install needed!

<script type="module">
  import 1naturalwayVueTheMask from 'https://cdn.skypack.dev/@1naturalway/vue-the-mask';


The Mask

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

Docs and Demo


The Mask Heart


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

Usage (two flavors)


import VueTheMask from 'vue-the-mask'

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}


'#': {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}

The Mask Money


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

The Mask Money

Other Solutions

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


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

Suggest another one here


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 ;)

The Mask Wolf


This project is licensed under MIT License