Vue 3 Support?

[calebeaires]

Hi. I wonder when are you going to offer support to Vue 3. I had look at your code and seen that something can be done:

ShortKey.install = (app, options) => {
    elementAvoided = [...(options && options.prevent ? options.prevent : [])];
    app.directive('shortkey', {
        created(el, binding, vnode) {
            // Mapping the commands
            const value = parseValue(binding.value);
            console.log(value);
            bindValue(value, el, binding, vnode);
        },
        updated(el, binding, vnode) {
            const oldValue = parseValue(binding.oldValue);
            unbindValue(oldValue, el);

            const newValue = parseValue(binding.value);
            bindValue(newValue, el, binding, vnode);
        },
        unmounted(el, binding) {
            const value = parseValue(binding.value);
            unbindValue(value, el);
        },
    });
};

This is the breaking changes from vue 2/3 https://v3.vuejs.org/guide/migration/custom-directives.html#custom-directives

[liquidvisual]

Would love to see Vue 3 support, this library is extremely useful.

[fgr-araujo]

Ok!! I will look at this asap.

[mokkabonna]

Any update? Do you need help with a concrete PR?

[danielelkington]

Have raised a pull request, and have also published an npm package vue-three-shortkey to use in the meantime until the PR is merged.

[ghiscoding]

@danielelkington Adding your fork into my project and I can see that it also adds custom-event-polyfill in the lib's package.json and I understand this polyfill was necessary in Vue 2 to support IE but in Vue 3 it is only meant to be used with greener browser so the polyfill could be dropped. It would be nice if you could do another update and drop that line and the use of it on this line. Cheers and thanks for the quick temp fork, I'm now using it

[danielelkington]

Thanks for the tip @ghiscoding; have released 4.0.1 of vue-three-shortkey without this polyfill.

[mattmess1221]

I've found (when using vueuse), this package isn't strictly needed. Vueuse has a function named useMagicKeys which returns an object of refs for each key combo, which can be watched.

Quick example of usage:

import { watch } from "vue";
import { useMagicKeys } from "@vueuse/core";

const { escape } = useMagicKeys();

watch(escape, (v) => {
  if (v) {
    console.log("Escape was pressed");
  }
});