The Mask input for Vue.js

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

loading...

What about currency?

We understand that money format is a totally different domain, which needs another specific component. You can use this one: v-money.

Install

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

Usage

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

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

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

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

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/autoNumeric/autoNumeric
  4. https://github.com/flaviosilveira/Jquery-Price-Format
  5. https://github.com/kevinongko/vue-numeric

Suggest another one here.