{"id":14528,"library":"di-vue-mask","title":"Vue 2 Input Mask Plugin","description":"di-vue-mask is a Vue.js plugin that provides input masking capabilities for HTML input elements, specifically designed for Vue 2 applications. It is currently at version 1.2.1 and has not been updated in approximately 5 years. This library differentiates itself by building upon `String-Mask` for its core masking logic and offering a variety of predefined masks such as `v-mask-date`, `v-mask-phone`, `v-mask-decimal`, `v-mask-cpf`, `v-mask-cnpj`, `v-mask-cep`, and `v-mask-cc`, along with a generic `v-mask` directive. Its release cadence is inactive, with the last significant update in v1.1.0 focusing on compatibility. A key characteristic is its strict dependency on Vue 2, meaning it is not compatible with Vue 3 or later versions.","status":"maintenance","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/devindex/vue-mask","tags":["javascript","vue","mask","plugin"],"install":[{"cmd":"npm install di-vue-mask","lang":"bash","label":"npm"},{"cmd":"yarn add di-vue-mask","lang":"bash","label":"yarn"},{"cmd":"pnpm add di-vue-mask","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for mask processing logic.","package":"string-mask","optional":false}],"imports":[{"note":"This is the default export of the plugin. It must be imported to register the masking directives globally via Vue.use().","wrong":"const VueMask = require('di-vue-mask')","symbol":"VueMask","correct":"import VueMask from 'di-vue-mask'"},{"note":"The library operates as a Vue plugin, registering all its masking directives (like v-mask, v-mask-date, etc.) globally for use in templates. These directives are not imported as separate JavaScript symbols but become available after plugin registration.","wrong":"new Vue({ components: { VueMask } })","symbol":"Vue.use(VueMask)","correct":"Vue.use(VueMask)"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueMask from 'di-vue-mask';\n\n// Register the plugin globally\nVue.use(VueMask);\n\nnew Vue({\n  el: '#app',\n  data: {\n    phoneNumber: ''\n  },\n  template: `\n    <div id=\"app\">\n      <label for=\"phoneInput\">Enter Phone Number (BR):</label>\n      <input type=\"text\" id=\"phoneInput\" v-model=\"phoneNumber\" v-mask-phone.br>\n      <p>Raw value: {{ phoneNumber }}</p>\n      <p>Try entering digits like '11987654321' to see the mask in action.</p>\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates how to install and register `di-vue-mask` as a Vue 2 plugin and apply a Brazilian phone number mask to an input field using `v-mask-phone.br`."},"warnings":[{"fix":"For new projects, use a Vue 3 compatible masking library. For existing Vue 2 projects, ensure you remain on Vue 2.","message":"This package is strictly compatible only with Vue 2. It will not work with Vue 3 or later versions due to significant API changes in Vue's core. Consider `maska`, `vue-imask`, `vue-3-mask-updated`, or `ertu-forms` for Vue 3 compatible solutions.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Replace `v-model` with `v-mask-model` for custom components that lack `v-model` support: `<my-input v-mask-model=\"maskValue\" v-mask=\"'0000-0000'\"></my-input>`.","message":"When using `di-vue-mask` on custom Vue components that do not inherently support `v-model`, you must use the `v-mask-model` directive instead of `v-model` to ensure proper masking and data binding.","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Carefully consult the documentation for the special mask characters and their exact meanings to construct correct mask patterns.","message":"The mask definitions rely on specific characters (`0`, `9`, `#`, `A`, `S`, `U`, `L`, `$`). Misinterpreting these characters can lead to masks not behaving as expected. For example, `0` is any number (required), `9` is any number (optional), and `A` is any alphanumeric character.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If encountering unexpected masking behavior, consider reviewing the `String-Mask` documentation or issues for deeper insight.","message":"This package is built upon the `String-Mask` library. While generally stable, any underlying issues or limitations in `String-Mask` could potentially manifest in `di-vue-mask`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For Vue 3 projects, use a Vue 3 compatible masking library like `maska`, `vue-imask`, or `vue-3-mask-updated`. This package is exclusively for Vue 2 applications.","cause":"Attempting to use `di-vue-mask` (a Vue 2 plugin) in a Vue 3 application. Vue 3's plugin registration API (`app.use()`) is different from Vue 2's (`Vue.use()`), and the internal directives are incompatible.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Ensure `import VueMask from 'di-vue-mask'; Vue.use(VueMask);` is called before your Vue instance is created. Verify that your project is indeed running Vue 2.","cause":"The `di-vue-mask` plugin has not been correctly registered with Vue, or it's being used in a Vue 3 environment where its directives are not recognized.","error":"Error: Failed to resolve directive: mask"}],"ecosystem":"npm"}