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 },
...
});
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>
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.
ā 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