Vue 3 support request (Plugin load fail in Vue3)

[tampler]

Hello I'm new to Vue and trying to use v-mask in my project. I was following the blog post, but the plugin fails on load.

System OS: Ubuntu 18.04 npm: 6.14.8 node: 14.12.0 browser: Chromium 85.0.4183.83

Loading with main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

Error code:

v-mask.esm.js?b6d0:501 Uncaught TypeError: Vue.filter is not a function
    at plugin (v-mask.esm.js?b6d0:501)
    at Object.use (runtime-core.esm-bundler.js?5c40:3364)
    at eval (main.js?56d7:6)
    at Module../src/main.js (app.js:1129)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1142)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925

Thanks for supporting this great plugin !

Boris

[probil]

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

[nizamutdinov]

@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.

[ux-engineer]

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?

[dinoluck]

Are we abandoning this package for Vue 3?

[dgoldstein89]

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(...); 

[leemcd56]

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!

[diego-lipinski-de-castro]

what about filters tho? Anyway to use it? @dgoldstein89

[dgoldstein89]

Like @nizamutdinov said:

"Filters" have been removed. Instead, it is suggested to use "computed" properties.

I haven’t looked into it further.

[ux-engineer]

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

[Chuuone]

While this temporary solution works, how would you go about adding custom placeholders?

In vue 2 Vue.use(VueMask, { placeholders: { H: /[0-2]{1}/, h: /[0-9]{1}/, M: /[0-5]{1}/, m: /[0-9]{1}/, S: /[0-5]{1}/, s: /[0-9]{1}/ } });

Edit 1 I resolved my requirement for now by copying the library and exposing the createDirective function. You can also go as far as remove the unused exports to make the custom package smaller. In v-mask/src/index.js

import {directive, createDirective} from './directive';
import filter from './filter';
import plugin from './plugin';

export {
  plugin as default,
  plugin as VueMaskPlugin,
  filter as VueMaskFilter,
  directive as VueMaskDirective,
  createDirective
};

The plugin seems to work as before. Just have to be sure to not use the new v-model syntax i.e. "v-model:custom-value" my-custom-installer.js

import {createDirective} from "../libraries/v-mask-custom";

export default function install(application) {
    const directive = createDirective({
        placeholders: {
            H: /[0-2]{1}/,
            h: /[0-9]{1}/,
            M: /[0-5]{1}/,
            m: /[0-9]{1}/,
            S: /[0-5]{1}/,
            s: /[0-9]{1}/
        }
    });

    application.directive("mask", {
        beforeMount: directive.bind,
        updated: directive.componentUpdated,
        unmounted: directive.unbind
    });
}

Attaching to application.

createApp({}).use(VueMaskCustom)

[amchconsult]

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

[probil]

Vue 3 release migration checklist:

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

[jboada]

Hello,

Any news on the migration?

Best Regards. JB

[srsimonson]

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!

[jamik-dev]

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!

@srsimonson, can you show how to use it, bcs it didn't work for me, thanks

[anujagrawal4]

Hello,

Is there any update on Vue3 compatibility? Thank you.