Vue Mask Next

Description

Vue 3 Input Mask Component

vue-mask-next is a lightweight library that provides input masking capabilities for Vue.js 3 applications. It builds on the concepts of vue-3-mask, adding features such as support for prefilled values and compatibility with the Composition API and <script setup>.

The MaskInput component is structured as follows:

Template

Contains a single <input> element bound to the component’s value data property via v-model.

Attribute Forwarding

Uses $attrs and v-bind="$attrs" to forward any attributes supplied to the component directly to the underlying <input>, enabling users to apply additional HTML attributes.

Script Setup

Declares props, including a required mask prop that defines the masking pattern.
Provides mask definitions so different characters can be interpreted uniquely within the mask pattern.

Masking Logic

The applyMask function applies the specified masking logic and returns the masked value.
The handleInput function is called on input events; it masks the current input value and updates the component’s value data property accordingly.