vue

Vue Input Mask

Note:

• IE9 is not supported in this module.
• Works with Vue 1.0. No support for 2.0, yet.

Getting started

First, install it.

npm i vue-text-mask --save

Then, use it as follows:

// main.js

import Vue from 'vue'
import App from './app.vue'
import textMask from 'vue-text-mask'

Vue.directive('text-mask', textMask)

new Vue({
  el: 'body',
  components: { App }
})

<!-- Template/Markup -->
<label>Phone Number</label>
<input
  type="text"
  name="phone"
  class="form-control"
  v-model="phone"
  v-text-mask="maskOptions">

Please note that you can only pass reference to an object, not an object literal. v-text-mask="{obj: 'literal'}" will not work.

// Component JS
data () {
  return {
    maskOptions: {
      mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
    }
  }
}

Documentation

For more information about the props that you can pass to the directive, see the documentation here.

Example

To see an example of the code running, follow these steps:

1. Clone the repo, git clone [email protected]:text-mask/text-mask.git
2. npm install
3. npm run vue:dev
4. Open http://localhost:3000

Contributing

We would love some contributions! Check out this document to get started.