Vue ShortKey plugin add shortcuts globally

vue-shortkey

The Vue-ShortKey Plugin offers easy implementation of keyboard shortcuts to fire any events even with large combinations of keys and providing modifiers.

Usages:

  • Setting the focus
  • Using in a component
  • Avoided fields
  • and other uses

Take a look at the example below.

Example

To start working with the Vue-ShortKey Plugin use the following command to install it.

$ yarn add vue-shortkey

in your App.js

Vue.use(require('vue-shortkey'))

The code below ensures that the key combination ctrl + alt + o will perform the 'dialog' method.

<button v-shortkey="['ctrl', 'alt', 'o']" @shortkey="dialog()">Open modal by pressing ctrl+alt+o</button>

The above example has a flaw, the function in the modifier @shortkey will be called repeatedly while the key is pressed.

You wouldn't want this to happen:

To call the function only once, use the once modifier.

<button v-shortkey.once="['f4']" @shortkey="dialog()">Open modal by pressing F4</button>

You can also point the focus to let's say an input, using the focus modifier. When using on a component, use the modifier .native to catch the events.

For all the available shortcuts and their combinations check the Key list.

More options are available here, like avoiding shortcuts within fields & other uses. That's it!