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

PropertyRequiredTypeDefaultDescription
valuefalseStringInput value or v-model
masktrueString, ArrayMask pattern
maskedfalseBooleanfalseemit value with mask chars, default is raw
placeholderfalseStringSame as html input
typefalseString'text'Input type (email, tel, number, ...)
tokensfalseObjecttokensCustom 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.