@4rk/vue-mousetrap

Mousetrap directive for Vue

Usage no npm install needed!

<script type="module">
  import 4rkVueMousetrap from 'https://cdn.skypack.dev/@4rk/vue-mousetrap';
</script>

README

`@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.