v-mask: Vue 3 support request (Plugin load fail in Vue3)

To add to what @nizamutdinov was saying, there’s also the issue of hook functions for directives being renamed. The following should work to use as a directive in Vue 3:

import { VueMaskDirective } from 'v-mask';

const vMaskV2 = VueMaskDirective;
const vMaskV3 = {
    beforeMount: vMaskV2.bind,
    updated: vMaskV2.componentUpdated,
    unmounted: vMaskV2.unbind
};

createApp(...)
   .directive('mask', vMaskV3)
   .mount(...); 

Hello,

Any news on the migration?

Best Regards. JB

Vue Core 3.0 has been released a couple of months ago, with full ‘latest’ tagged release with all the official packages maturing as stable, aimed at the end of the year.

@probil as there is less than a month of time left, have you been planning for this upgrade?

Vue 3 release migration checklist:

• Update dependencies to use Vue 3
• Update hook method names
• Expose filter as a function to use as computed + tests
• Update unit-tests (includes @vue/test-utils upgrade to v2)
• Update e2e tests
• Update docs

Are we abandoning this package for Vue 3?

@probil Hey

VUE 3.0 requires two major changes:

1. Directives are now declared differently.

2. “Filters” have been removed. Instead, it is suggested to use “computed” properties.

After making these changes, the directives works as before.

But still, the filter needs to be replaced with a computed property.

Hope it helps.

https://www.npmjs.com/package/maska

I was able to replace v-mask with maska. I didn’t even have to change my masking conventions, it was literally a 1:1 swap, app.use(Maska) then added an “a” at the and of all references to v-mask to make v-maska and that was it.

I doubt everyone will have such a seamless transition, but Maska is worth a shot!

any news about v-mask for Vue 3? thank you

Hey @tampler . v-mask doesn’t support Vue 3 yet. Since Vue 3 has been released recently I suppose it’s time to make library compatible with it. Thanks for the issue

@dgoldstein89 https://v3.vuejs.org/guide/migration/filters.html#global-filters

To add to what @nizamutdinov was saying, there’s also the issue of hook functions for directives being renamed. The following should work to use as a directive in Vue 3:

import { VueMaskDirective } from 'v-mask';

const vMaskV2 = VueMaskDirective;
const vMaskV3 = {
    beforeMount: vMaskV2.bind,
    updated: vMaskV2.componentUpdated,
    unmounted: vMaskV2.unbind
};

createApp(...)
   .directive('mask', vMaskV3)
   .mount(...); 

Thank you so much! This really helped!