Vue-shortcuts NPM

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