Vue 3 Hooks For Binding Keyboard Events - hotKey

Install & Download:

# Yarn
$ yarn add vue3-hotkey
# NPM
$ npm i vue3-hotkey

Description:

Vue 3 hooks for binding keyboard events on the app.

How to use it:

1. Import the Hooks.

import useHotkey, { HotKey } from 'vue3-hotkey'
import { ref } from 'vue'

2. Bing custom keyboard events as follows:

setup() {
  const hotkeys = ref<HotKey[]>([
    {
      keys: ['space'],
      preventDefault: true,
      handler(keys) {
        countRef.value += 5
      }
    },
    {
      keys: ['shift', 'space'],
      preventDefault: true,
      handler(keys) {
        countRef.value -= 100
      }
    }
  ])
  const stop = useHotkey(hotkeys.value)
}