useHotkey API

Handle keyboard shortcuts within your application using the useHotkey composable.

Function Signature

function useHotkey(
  keys: MaybeRef<string | undefined>,
  callback: (e: KeyboardEvent) => void,
  options?: HotkeyOptions
): () => void

Name	Type	Default	Description
keys	`MaybeRef<string \| undefined>`	required	The key combination string or reactive reference to a key combination. Supports modifiers (ctrl, cmd, alt, shift, meta) and key sequences separated by dashes. Changes to reactive refs are automatically applied.
callback	`(e: KeyboardEvent) => void`	required	Function to execute when the hotkey is triggered. Receives the KeyboardEvent as a parameter.
options	`HotkeyOptions`	`{}`	Optional configuration object to customize hotkey behavior. All options support reactive refs and will update automatically when changed.

HotkeyOptions

Name	Type	Default	Description
event	`MaybeRef<'keydown' \| 'keyup'>`	`'keydown'`	The keyboard event type to listen for. Can be reactive - changing this will automatically re-register the event listener.
inputs	`MaybeRef<boolean>`	`false`	Whether to trigger hotkeys when input elements (input, textarea, contenteditable) are focused. When false, hotkeys are disabled in input contexts. Changes to reactive refs take effect immediately.
preventDefault	`MaybeRef<boolean>`	`true`	Whether to call preventDefault() on the keyboard event when the hotkey matches. Can be reactive to dynamically control event prevention.
sequenceTimeout	`MaybeRef<number>`	`1000`	Timeout in milliseconds for key sequences. If the next key in a sequence isn't pressed within this time, the sequence resets. Changes to reactive refs apply to new sequences.

Type	Description
`() => void`	Cleanup function that removes the keyboard event listener. Automatically called when the component unmounts if used within a Vue component setup context.