{"id":12601,"library":"vue-text-mask","title":"Vue Input Mask","description":"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.","status":"maintenance","version":"6.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/text-mask/text-mask","tags":["javascript","vue","vue-component","input mask","text mask","string mask","input formatting","text formatting","string formatting"],"install":[{"cmd":"npm install vue-text-mask","lang":"bash","label":"npm"},{"cmd":"yarn add vue-text-mask","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-text-mask","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core masking logic and functions, essential for the component's operation.","package":"text-mask-core","optional":false}],"imports":[{"note":"The primary component is typically imported as a default export.","wrong":"import { MaskedInput } from 'vue-text-mask'","symbol":"MaskedInput","correct":"import MaskedInput from 'vue-text-mask'"},{"note":"For global registration in Vue 2 applications, directly register the imported component.","symbol":"MaskedInput (Global)","correct":"import Vue from 'vue'; import MaskedInput from 'vue-text-mask'; Vue.component('masked-input', MaskedInput);"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <label for=\"phone-input\">Phone Number</label>\n    <masked-input\n      id=\"phone-input\"\n      type=\"text\"\n      name=\"phone\"\n      class=\"form-control\"\n      v-model=\"phone\"\n      :mask=\"['(', /[1-9]/, /\\d/, /\\d/, ')', ' ', /\\d/, /\\d/, /\\d/, '-', /\\d/, /\\d/, /\\d/, /\\d/]\"\n      :guide=\"false\"\n      placeholderChar=\"#\"\n    ></masked-input>\n    <p>Raw value: {{ phone }}</p>\n  </div>\n</template>\n\n<script type=\"module\">\n  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.min.js';\n  import MaskedInput from 'https://cdn.jsdelivr.net/npm/vue-text-mask@6.1.2/dist/vueTextMask.esm.js';\n\n  new Vue({\n    el: '#app',\n    components: {\n      MaskedInput\n    },\n    data () {\n      return {\n        phone: ''\n      }\n    }\n  });\n</script>","lang":"javascript","description":"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`."},"warnings":[{"fix":"Review event listeners on `<masked-input>` components and adjust to standard Vue event practices. The internal event emissions might have been updated.","message":"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.","severity":"breaking","affected_versions":">=6.1.2"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=6.x"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=6.1.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `MaskedInput` is imported and added to the `components` option of your Vue component or globally registered using `Vue.component('masked-input', MaskedInput)`.","cause":"The `MaskedInput` component was not correctly registered in the Vue application or component.","error":"Failed to resolve component: masked-input"},{"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.","cause":"The `mask` prop expects an array of characters and/or regular expressions, or a function, but received an incorrect type.","error":"TypeError: mask is not iterable"}],"ecosystem":"npm"}