@4rk/vue-mousetrap

@4rk/vue-mousetrap

A Vue plugin providing a directive to add global keyboard shortcuts to your components based on Mousetrap.

Installation

import VueMousetrap from "@4rk/vue-mousetrap";

Vue.use(VueMousetrap);

Usage

<template>
  <div v-mousetrap="['mod+s']" @mousetrap="onMousetrap">
    hit ctrl-s to save
  </div>
</template>

<script>
export default {
  methods: {
    onMousetrap() {
      console.log("save!");
    }
  }
};
</script>

API

The v-mousetrap directive expects a Moustrap compatible value as defined at Mousetrap.bind.

The @mousetrap event triggers with the Mousetrap event.