v1.0  Easy to use shortcut keys library

Implement Shortcut Keys
in your Vue apps

Approachable, Full featured and Easy to use Shortcut Keys library for your Vue.js apps

Try It by pressing below commands ❤️

The Vue Hotkeys Component helps you to smoothly implement keyboard shortcuts to any Vue application

Getting Started

For, using vue-hotkeys-rt in your vue apps, you have to install it as a dependency by following commands

> yarn add vue-hotkeys-rt

or

> npm install vue-hotkeys-rt -S

After, that you have to import it in your vue app


import Vue from 'vue/dist/vue.js';
import Hotkeys from 'vue-hotkeys-rt';

new Vue({
  ...
  components: { Hotkeys },
  ...
});

Handling the keyboard shortcuts

Vue Hotkeys emits the triggered event always a shortcut is used. So, everything you need to do is define a handler that will take an action depending on the pressed keys.

Vue Hotkeys assume that a shortcut is a combination of CMD+Key.


<template>
  <div>
    <Hotkeys
      :shortcuts="['S', 'D', 'ArrowLeft', 'ArrowRight']"
      :debug="true"
      @triggered="onTriggeredEventHandler"
    />
  </div>
</template>
        
<script lang="ts">
import Hotkeys from 'vue-hotkeys-rt';
        
export default {
  ...
  components: { Hotkeys },
        
  methods: {
    onTriggeredEventHandler(payload) {
      console.log(`You have pressed CMD (CTRL) + ${payload.keyString}`);
    }
  }
  ...
};
</script>

Passing props and event

The <Hotkeys /> component accepts two props and one event called triggered

  1. shortcuts
  2. debug
  3. @triggered

shortcuts prop accepts array of strings something like :shortcuts="['S', 'D', 'ArrowLeft', 'ArrowRight']". These strings/characters are basically keyboard buttons which you want to use to trigger an event. For, A.....Z buttons you can use same name but for using different keys like Arrow Keys (⬅️, ➡️) you have to pass specific values for that please refer this table.

Next, debug prop accepts boolean value. This prop is useful in developement mode where you can see which key has been pressed in the console.
If you are in a production mode then you should have to pass it as a "false" it's recommended.

After that, next is @triggered event in which you have to pass a method which have to call when user press that specific keys. (This is just a event listener if you know the concept of Component Events in Vue). You have to pass name of the method which you have to call after pressing the shortcut keys.

Props Table

Key String (prop) to be passed Code
{{key.name}} {{key.prop}} {{key.code}}

Contributing Guide

Do you know Vue.js and would like to contribute?

Great 🙌 , I'd love to have your help to improve this component. Just clone this repository and send back your contributions as pull requests.

Wanna chat? 🙂 Drop me a line on Twitter.

First, of all Fork this repo, then clone it to your local machine and install the dependencies:

Note: First, you have to install parcel using yarn because, currently parcel is not working with npm

> yarn add parcel

After, doing parcel installation now it's time to install other dependencies

> npm install

Now, run below command to start developement server

> npm run start

Do, make your changes and after that make Pull Request 🙂.

Contributors