DEV Community

Cover image for I Built a Zero-Config Keyboard Shortcut Manager for Vue 3
Oraz Chollaev
Oraz Chollaev

Posted on

I Built a Zero-Config Keyboard Shortcut Manager for Vue 3

#webdev #nuxt #typescript #vue

Keyboard shortcuts are a small feature, but they can make a big difference in web applications.

Think about apps like dashboards, editors, or productivity tools. Users expect shortcuts like:

  • ctrl + k → open search
  • ctrl + s → save
  • ctrl + z → undo

However, managing keyboard shortcuts in Vue apps can quickly become messy.

Most projects end up using global keydown listeners scattered across different components. This leads to problems like duplicated logic, missing cleanup when components unmount, and no clear overview of which shortcuts exist in the app.

To solve this, I created a small library called vue-shortcut-manager.

It is a simple keyboard shortcut manager for Vue 3 with zero configuration.

There is no plugin setup and no main.ts configuration. You just import and use it.

Installation 

pnpm add vue-shortcut-manager
Enter fullscreen mode Exit fullscreen mode

or

npm install vue-shortcut-manager
Enter fullscreen mode Exit fullscreen mode

Basic usage 

<script setup lang="ts">
import { useShortcut } from "vue-shortcut-manager"

useShortcut("ctrl+k", () => openSearch(), {
  description: "Open search"
})
</script>
Enter fullscreen mode Exit fullscreen mode

The shortcut is automatically registered when the component mounts and cleaned up when it unmounts.

Multiple shortcuts

You can also register multiple shortcuts at once.

useShortcuts([
  { key: "ctrl+s", handler: save, description: "Save" },
  { key: "ctrl+z", handler: undo, description: "Undo" },
  { key: "ctrl+shift+z", handler: redo, description: "Redo" }
])
Enter fullscreen mode Exit fullscreen mode

Scoped shortcuts

Sometimes shortcuts should only work in specific parts of the application.

For example, editor shortcuts should not run outside the editor.

useShortcutScope("editor")

useShortcut("ctrl+b", toggleBold, {
  scope: "editor",
  description: "Bold"
})
Enter fullscreen mode Exit fullscreen mode

Sequence shortcuts

You can also create sequence shortcuts similar to GitHub navigation.

Example:

g h → go home
g i → go inbox

useShortcut("g h", () => router.push("/"))
useShortcut("g i", () => router.push("/inbox"))
Enter fullscreen mode Exit fullscreen mode

Built-in shortcut cheatsheet

The library also includes a simple cheatsheet modal.

Just add:

<ShortcutCheatsheet />
Enter fullscreen mode Exit fullscreen mode

Press shift + ? and it will display all registered shortcuts in your app.

GitHub and NPM

GitHub
https://github.com/orazchollaev/vue-shortcut-manager

NPM
https://www.npmjs.com/package/vue-shortcut-manager

Feedback

This is an early project and feedback is welcome. If you have ideas or suggestions, feel free to open an issue.

Top comments (0)