Handling Keyboard Shortcuts In Vue 3 App – hotkeys-rt

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

Preview:

Changelog:

v0.2.0 (11/08/2022)

• Bugfixes

Download Details:

Author: rogeriotaques

Live Demo: https://rogeriotaques.github.io/vue-hotkeys-rt/

Download Link: https://github.com/rogeriotaques/vue-hotkeys-rt/archive/refs/heads/master.zip

Official Website: https://github.com/rogeriotaques/vue-hotkeys-rt

Install & Download:

# Yarn
$ yarn add vue-hotkeys-rt

# NPM
$ npm i vue-hotkeys-rt