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

Vue Tasty Burgers Hamburger Button Library
icon-eye-dark Created with Sketch. 9.077
Vue Dapp Crypto Wallet Integration
icon-eye-dark Created with Sketch. 853
Sentry for Vue Vue Application Monitoring
💚 Sponsored by Friends
Discover a framework that is designed from scratch to be incrementally adoptable!
Cookbook VueJS + NodeJS Evergreen Cookbook
icon-eye-dark Created with Sketch. 35.175
Vue Fake Input Input field for individual characters
icon-eye-dark Created with Sketch. 2.485