Restoring compatibility with Vue 3 component library

[AlessandroAmos]

In version 1, when using the v-mask directive, even if the v-mask directive was used in input components from famous Vue 3 libraries such as Vuetify and NaiveUI, the mask worked perfectly... I would like this to be made available in this new version as well.

[beholdr]

It should work now too. Could you please provide online example for me to see?

[radimhornicek]

I can confirm that behavior. In nuxt v3 worked directive beholder-maska@1.x with Vuetify@3.x side by side. Current v2.1.7 not. In console - there is no error. It just doesnt work anymore. I checked component in DevVue and it seems that Vuetify pass down all attr including data-maska (as well as directive I belive)

[beholdr]

Here is example with Vuetify 3.1.7

[radimhornicek]

Hm interisting, I tried that only with data-maska attribue eg. data-maska="+1 (###) ###-##-##" and that doesn't work. Maybe I just didn't understand how it works. Your solution is good enough. Thank you for your help!

[beholdr]

Problem is vuetify does not pass data-maska attribute to native input so you need to use directive options.

[inNetto]

const maskaOptions = {
  mask: '+1 (###) ###-##-##',
  onMaska: (detail: MaskaDetail) => console.log(detail.unmasked)
}

<v-text-field
        v-model="cpf"
        v-maska:[maskaOptions]
        label="Cpf"
        :error-messages="errors.cpf"
/>

Worked. Thanks