made with vue.js

Vue Mask Next

Vue 3 Input Mask Component

Visit Site


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


Mustafa Çağrı Güven

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