Vue 3 Hooks For Binding Keyboard Events – hotKey

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)
}

Preview:

Changelog:

v0.1.2 (07/31/2022)

• Add event to handler method as 2nd arg.

Download Details:

Author: Talljack

Live Demo: https://vue3-hot-key-demo.vercel.app/

Download Link: https://github.com/Talljack/vue3-hotKey/archive/refs/heads/main.zip

Official Website: https://github.com/Talljack/vue3-hotKey

Install & Download:

# Yarn
$ yarn add vue3-hotkey

# NPM
$ npm i vue3-hotkey