made with vue.js

Vue Mask Next

Vue 3 Input Mask Component

Visit Site

Description

Vue 3 Input Mask Component

"vue-mask-next is a simple input mask library for Vue.js 3, designed to facilitate the creation of input masks for fields in your Vue.js 3 applications.

This library is inspired by vue-3-mask but provides additional functionality such as prefilled value support, and it currently works with Vue, the composition API, and script setup.

The MaskInput component implementation utilizes the following:

  • A template with a single input element element, bound to the value data property using v-model
  • The $attrs object, which forwards any attributes passed to the component to the underlying input element using v-bind="$attrs". This allows users to apply additional attributes directly to the input element
  • Script setup with props, including a required prop mask specifying the masking pattern
  • Mask definitions allowing different characters to be interpreted differently in the mask pattern
  • The applyMask function, which applies the masking logic to generate the masked value
  • The handleInput function, triggered on input events, applies the mask to the input value, updating the value data property accordingly

Creator

Mustafa Çağrı Güven
@mustafacagri


Social Media Links

Syncfusion Vue Data Grid Data Grid / Data Table
icon-eye-dark Created with Sketch. 15.932
VueFunnelGraph.js SVG Funnel Graph Library
icon-eye-dark Created with Sketch. 14.803
Sentry for Vue Vue Application Monitoring
💚 Sponsored by Friends
image-vuetify Created with Sketch.
Supercharge Your Development with the Power of Vue and Material Design
Vue Datepicker Date & Date Range Picker
icon-eye-dark Created with Sketch. 22.100
Vue Notify.js Notification Component
icon-eye-dark Created with Sketch. 9.170