TanStack
Hotkeys v0v0
Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Menu
Getting Started
Guides
API Reference
Hotkeys API Reference
App Hotkeys API Reference
Key hold & held keys API Reference
Hotkey Recorder API Reference
Normalization & format API Reference
Examples
Hotkey Recorder API Reference

useHotkeyRecorder

Call Signature

ts
function useHotkeyRecorder(options): VueHotkeyRecorder<HotkeyChord>;
function useHotkeyRecorder(options): VueHotkeyRecorder<HotkeyChord>;

Defined in: useHotkeyRecorder.ts:46

Vue composable for recording keyboard shortcuts. Options may be a ref or getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

HotkeyChordRecorderOptions

Returns

VueHotkeyRecorder<HotkeyChord>

Example

ts
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })

Call Signature

ts
function useHotkeyRecorder(options): VueHotkeyRecorder;
function useHotkeyRecorder(options): VueHotkeyRecorder;

Defined in: useHotkeyRecorder.ts:49

Vue composable for recording keyboard shortcuts. Options may be a ref or getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

HotkeySequenceRecorderOptions

Returns

VueHotkeyRecorder

Example

ts
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })

Call Signature

ts
function useHotkeyRecorder(options): VueHotkeyRecorder;
function useHotkeyRecorder(options): VueHotkeyRecorder;

Defined in: useHotkeyRecorder.ts:54

Vue composable for recording keyboard shortcuts. Options may be a ref or getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

() => HotkeySequenceRecorderOptions

Returns

VueHotkeyRecorder

Example

ts
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })

Call Signature

ts
function useHotkeyRecorder(options): VueHotkeyRecorder<HotkeyChord>;
function useHotkeyRecorder(options): VueHotkeyRecorder<HotkeyChord>;

Defined in: useHotkeyRecorder.ts:57

Vue composable for recording keyboard shortcuts. Options may be a ref or getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

() => HotkeyChordRecorderOptions

Returns

VueHotkeyRecorder<HotkeyChord>

Example

ts
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })

Call Signature

ts
function useHotkeyRecorder(options): VueHotkeyRecorder;
function useHotkeyRecorder(options): VueHotkeyRecorder;

Defined in: useHotkeyRecorder.ts:60

Vue composable for recording keyboard shortcuts. Options may be a ref or getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

Ref<HotkeyRecorderOptions>

Returns

VueHotkeyRecorder

Example

ts
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
const recorder = useHotkeyRecorder({ onRecord: (hotkey) => (shortcut.value = hotkey) })
const sequenceRecorder = useHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
Edit on GitHub
HotkeyConflictOptions
VueHotkeyRecorder
© 2026 TanStack LLC