Registry / web-framework / vue-text-mask

vue-text-mask

library6.1.2jsnpmunverified

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.

web-framework serialization

npm install vue-text-mask

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TEXT-MASK

vue-text-mask

web-frameworkjavascriptv6.1.2

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.

MaskedInput

✓ import MaskedInput from 'vue-text-mask'

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

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>

Debug

Known issues

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

affects: >=6.1.2

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.

affects: >=6.x

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

affects: >=6.1.2

Errors

Common errors & fixes

Failed to resolve component: masked-input

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

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.

Upgrade

Version history

6.1.2latest on npm

Audit

Dependencies

text-mask-corerequiredProvides the core masking logic and functions, essential for the component's operation.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/text-mask/text-mask ↗

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