VueShortcuts

A Simple keyboard shortcut plugin for Vue

Installation

npm install --save vue-shortcuts

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueShortcuts from 'vue-shortcuts'
 
Vue.use(VueShortcuts, { prevent: ['input'] })

Options

Prop	Type	Default	Describe
prevent	Array	[]	List of selectors that will ignore the event

Syntax

<component v-shortcuts="[
  { shortcut: [ 'ctrl', 'space' ], callback: foo, push: true, focus: true },
  { shortcut: [ 'shift', 'esc' ], callback: bar, once: true, disabled: someBoolean },
]">

<component2 v-shortcuts="[ { avoid: true } ]">

Props

Prop	Type	Default	Describe
shortcut	Array	[]	Array of keystrokes that trigger the callback
callback	Function	none	Callback function called while the key is pressed
once	Boolean	false	Trigger only on keyup
push	Boolean	false	Trigger only on keydown and up, not contiuously while held
focus	Boolean	false	Focus element instead of calling callback
disabled	Boolean	false	Reactive property that disables that key
avoid	Boolean	false	Prevent the event when this element is focused
prevent	Boolean	true	Whether to prevent the default and stop propagation when pressing that key

Key list

Key	Shortkey Name
Shift	shift
Control	ctrl
Alt	alt
Alt Graph	altgraph
Super (Windows or Mac Cmd)	meta
Arrow Up	arrowup
Arrow Down	arrowdown
Arrow Left	arrowleft
Arrow Right	arrowright
Enter	enter
Escape	esc
Tab	tab
Space	space
Page Up	pageup
Page Down	pagedown
Home	home
End	end
A - Z	a-z
0-9	0-9
F1-F12	f1-f12

Credit

Initally forked from iFgR/vue-shortkey

License

MIT