Smoothly Implements Keyboard Shortcuts (hotkeys) in Vue

Smoothly Implements Keyboard Shortcuts (hotkeys) in Vue

Vue Hotkeys

Getting started

Install the component as a dependency of your project.

$ npm install vue-hotkeys-rt -S

Import it to your Vue app.

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

Now use it on the Vue app.

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

Handling pressed keyboard shortcuts

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

<template >
  <div >
    <hotkeys
      :shortcuts="['S', 'D']"
      :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>

Contributing

Do you know Vue.js and would like to contribute? 🙌 Great, I’d love to have you helping improve this tool. Just clone this repository and send back your contributions as pull requests.

Wanna chat? 🙂 Drop me a line on Twitter.

Suggest:

☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

☞ Learn Vue.js from scratch 2018

☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

☞ Vue.js Tutorial: Zero to Sixty

☞ Learn Vue.js from Scratch - Full Course for Beginners

☞ Create Shopping basket page With Vuejs and Nodejs