Vue Input Mask

6.1.2 · maintenance · verified Sun Apr 19

Vue Text Mask is a Vue.js component that provides input masking capabilities, serving as a wrapper around the core `text-mask` library. It enables developers to define input formats using a declarative array of regex and static characters, supporting common use cases like phone numbers, dates, and currency. The package is currently at version 6.1.2 for Vue 2 and is part of a larger, cross-framework `text-mask` ecosystem which also includes wrappers for React, Angular, and vanilla JavaScript. While still functional, the overall `text-mask` project and its framework-specific packages appear to be in a maintenance phase, with the latest significant updates for `vue-text-mask` dating back to late 2020 or early 2021. It differentiates itself by offering robust features like pasting, browser auto-fill support, and a lightweight footprint, without external dependencies beyond its core library.

Common errors

```
Failed to resolve component: masked-input
```
cause The `MaskedInput` component was not correctly registered in the Vue application or component.

fix Ensure `MaskedInput` is imported and added to the `components` option of your Vue component or globally registered using `Vue.component('masked-input', MaskedInput)`.
```
TypeError: mask is not iterable
```
cause The `mask` prop expects an array of characters and/or regular expressions, or a function, but received an incorrect type.

fix Verify that the `:mask` prop is bound to a valid array (e.g., `['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, '-', /\d/, /\d/, /\d/, /\d/]`) or a function that returns a mask array.

Warnings

breaking Version 6.1.2 introduced a change in event binding to use more idiomatic Vue events. This might affect applications relying on specific non-standard event handling for the masked input.
Fix: Review event listeners on `<masked-input>` components and adjust to standard Vue event practices. The internal event emissions might have been updated.
gotcha `vue-text-mask` is primarily designed for Vue 2. While it might still function in some Vue 3 setups, it's not officially supported for Vue 3, and direct compatibility issues may arise. For Vue 3, alternative masking libraries are recommended.
Fix: For Vue 3 projects, consider using dedicated Vue 3 input mask libraries like `vue-3-mask` or `v-mask` which are built with Vue 3 compatibility in mind.
gotcha The `text-mask` project, including `vue-text-mask`, appears to be in maintenance mode, with no significant new features or major updates since late 2020 / early 2021. This could mean slower support for new Vue features or critical bug fixes.
Fix: Evaluate long-term project needs. For highly active development or new Vue versions, consider more actively maintained alternatives. Always test thoroughly when updating Vue itself.

Install

npm install vue-text-mask npm
yarn add vue-text-mask yarn
pnpm add vue-text-mask pnpm

Imports

MaskedInput
wrong:
```
import { MaskedInput } from 'vue-text-mask'
```
correct:
```
import MaskedInput from 'vue-text-mask'
```
The primary component is typically imported as a default export.
MaskedInput (Global)
```
import Vue from 'vue'; import MaskedInput from 'vue-text-mask'; Vue.component('masked-input', MaskedInput);
```
For global registration in Vue 2 applications, directly register the imported component.

Quickstart

This quickstart demonstrates how to use `vue-text-mask` in a basic Vue 2 application, registering the `MaskedInput` component and applying a phone number mask to an input field with `v-model`.

<template>
  <div id="app">
    <label for="phone-input">Phone Number</label>
    <masked-input
      id="phone-input"
      type="text"
      name="phone"
      class="form-control"
      v-model="phone"
      :mask="['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]"
      :guide="false"
      placeholderChar="#"
    ></masked-input>
    <p>Raw value: {{ phone }}</p>
  </div>
</template>

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.min.js';
  import MaskedInput from 'https://cdn.jsdelivr.net/npm/vue-text-mask@6.1.2/dist/vueTextMask.esm.js';

  new Vue({
    el: '#app',
    components: {
      MaskedInput
    },
    data () {
      return {
        phone: ''
      }
    }
  });
</script>

view raw JSON →