Vue 3 Support

[fatalis]

here's a way to use in Vue 3 in the mean time if anyone needs this:

app.directive('hotkey', {
  beforeMount: VueHotkey.directive.bind,
  updated: VueHotkey.directive.componentUpdated,
  unmounted: VueHotkey.directive.unbind,
});

[ayophanz]

Still not working, see images

[Nihilop]

work for me :

main.ts

 app.directive('hotkey', {
    beforeMount: VueHotkey.directive.bind,
    updated: VueHotkey.directive.componentUpdated,
    unmounted: VueHotkey.directive.unbind,
  }); 

file.vue

data() {
  return {
     searchPanel: false,
  }
},
methods: {
   showSearch() {
      console.log('opened')
      this.searchPanel = !this.searchPanel
    }
  },
  computed: {
    openSearch() {
      return {
        'ctrl+f: { 
          keyup: this.showSearch
        }
      }
    }
  }

<span v-show="searchPanel" v-hotkey.prevent='openSearch'>Blabla</span>

note : v-hotkey as attr and openSearch (computed)

[scott-fryxell]

I have this working in vue3, but my tests that use the directive fail.

[Vue warn]: Failed to resolve directive: hotkey
at
at

[wobsoriano]

Published a fork in the meantime https://github.com/wobsoriano/v-hotkey3

With added useHotkey composable.

[heyakyra]

Maybe @Dafrok can merge #48 🤞

[wobsoriano]

Maybe @Dafrok can merge #48 🤞

Does my fork above not work for you?

[heyakyra]

Works great, but would be nice to not need a separate package. Also, wish that arbitrary key combinations were allowed, not just the small set of modifiers