Handling Keyboard Shortcuts In Vue 3 App - hotkeys-rt

Install & Download:

# Yarn
$ yarn add vue-hotkeys-rt
# NPM
$ npm i vue-hotkeys-rt

Description:

Yet another Vue 3 component that allows you to implement custom keyboard shortcuts on applications.

How to use it:

1. Import and register the component.

import Hotkeys from 'vue-hotkeys-rt';

export default {
  components: { Hotkeys },
  // ...
};

2. Trigger an event as you press a specified keyboard shortcut.

CMD (CTRL) + R
CMD (CTRL) + A
CMD (CTRL) + Arrow Left
CMD (CTRL) + Arrow Right

<template >
  <div >
    <hotkeys
      :shortcuts="['R', 'A', 'ArrowLeft', 'ArrowRight']"
      @triggered="onTriggeredEventHandler"
    />
  </div>
</template>

export default {
  components: { Hotkeys },
  methods: {
    onTriggeredEventHandler(payload) {
      console.log(`You have pressed CMD (CTRL) + ${payload.keyString}`);
    }
  }
};