[Feature Request] Bring masks back

[andreixk]

Problem to solve

Vuetify 1.5 used to have this functionality implemented properly. Current proposition of using 3rd party plugins (especially vue-the-mask) is useless. Those plugins are clumsy, incomplete and generally require a lot of re-work to integrate. each v-text-field becomes a 10-15 line monstrosity, forms are a nightmare to create and even worse to debug.

Proposed solution

Simple: bring back the masks that were in v1.5

[Mikilll94]

Yes, It would be great to bring mask functionality again to Vuetify 2.x

About vue-the-mask I will add also that:

• This plugin is outdated. Latest version was released on 10 Oct 2017. There are many bugs in this plugin which were not fixed. Just look here: https://github.com/vuejs-tips/vue-the-mask/issues/137 https://github.com/vuejs-tips/vue-the-mask/issues/112

• This plugin has no MIT license, so theoretically you cannot use it. https://github.com/vuejs-tips/vue-the-mask/issues/111

[MajesticPotatoe]

We have plans to bring this back for v3. The likelihood of it making its way into v2 is undetermined yet slim.

[rpaggi]

What is the way to apply masks in the current version?

[andreixk]

What is the way to apply masks in the current version?

make your own plugin or use another framework. there's no good solution for vuetify

[RonaldJerez]

I am the author of vue-input-facade. It started as a fork of vue-the-mask to fix some of the outstanding issues, but it has evolved while still maintaining a similar API. I'll be willing to help out if you guys want to include it in vuetify. It is currently been used in a high visible project at my current employment (Fortune 500 company), so I'll be maintaining it for quite some time.

[gogangipark]

I am the author of vue-input-facade. It started as a fork of vue-the-mask to fix some of the outstanding issues, but it has evolved while still maintaining a similar API. I'll be willing to help out if you guys want to include it in vuetify. It is currently been used in a high visible project at my current employment (Fortune 500 company), so I'll be maintaining it for quite some time.

It will be very helpful to use vuetify.

[SkyaTura]

These is any perspective on this topic? Or a recommended workaround

[builder555]

i'm using maska. It does the job well.

[SkyaTura]

Will this ever come back to the roadmap?

[johnleider]

Will this ever come back to the roadmap?

Yes

[MatthewAry]

Would it be possible to do an RFC on how masking will be handled?

[johnleider]

Maybe for 3.6+

[SkyaTura]

What is the official workaround recommendation? Most of the libraries made for this purpose are designed for input native element and does not work well with wrapped inputs like Vuetify

I understand it's a complicated feature to implement, but it is also extremely common use case of inputs overall. It would be nice to have at least a direction to look for in terms of compatibility with the framework.

[johnleider]

@KaelWD might have a recommendation for this, but I do not, sorry.

[mlebrasseur]

I use the directive from vue-input-facade and it works great. You need to use the beta version (vue 3 support). https://github.com/RonaldJerez/vue-input-facade

[yuwu9145]

Third-party integration

As per recent testing of vue-input-facade and maska. I found specific ways to make them compatible with Vuetify's v-text-field:

• For Maska, using v-maska directive bindings works, but applying tokens using data-maska attribute doesn't work.
• For vue-input-facade, the beta version 3.0.0-beta is compatible with Vue3/Vuetify3.

I have created a demo that illustrates how to integrate these two libraries with Vuetify.

It could be used as an immediate workaround if you want to try.

Long-term plan for implementing built-in mask logic

#19207 is working in progress, with the initial goal of porting the mask logic from v1 to v3