di-vue-mask

library1.2.1jsnpmunverified

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.

web-framework

npm install di-vue-mask

github ↗package ↗

INSTALL

IMPORT

SIG · DI-VUE-MASK

di-vue-mask

web-frameworkjavascriptv1.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueMask

✓ import VueMask from 'di-vue-mask'

✗ const VueMask = require('di-vue-mask')

This is the default export of the plugin. It must be imported to register the masking directives globally via Vue.use().

Vue.use(VueMask)

✓ Vue.use(VueMask)

✗ new Vue({ components: { VueMask } })

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.

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`.

import Vue from 'vue'; import VueMask from 'di-vue-mask'; // Register the plugin globally Vue.use(VueMask); new Vue({ el: '#app', data: { phoneNumber: '' }, template: ` <div id="app"> <label for="phoneInput">Enter Phone Number (BR):</label> <input type="text" id="phoneInput" v-model="phoneNumber" v-mask-phone.br> <p>Raw value: {{ phoneNumber }}</p> <p>Try entering digits like '11987654321' to see the mask in action.</p> </div> ` });

Debug

Known issues

breakingThis 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.

fix

For new projects, use a Vue 3 compatible masking library. For existing Vue 2 projects, ensure you remain on Vue 2.

affects: >=1.0.0

gotchaWhen 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.

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>`.

affects: >=1.1.0

gotchaThe 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.

fix

Carefully consult the documentation for the special mask characters and their exact meanings to construct correct mask patterns.

affects: >=1.0.0

gotchaThis 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`.

fix

If encountering unexpected masking behavior, consider reviewing the `String-Mask` documentation or issues for deeper insight.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'use')

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.

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.

Error: Failed to resolve directive: mask

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.

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.

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

string-maskrequiredCore library for mask processing logic.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/devindex/vue-mask ↗

packagehttps://www.npmjs.com/package/di-vue-mask ↗