Vue Tip: Composable to Define Keyboard Shortcuts

I want to show you a handy Vue composable that allows you to define keyboard shortcuts in your app. I discovered it in Nuxt UI, and it's called defineShortcuts.

How to Use It

Let me first demonstrate how to use it. You can define your shortcuts in a setup function like this:

1<script setup lang="ts">
2const isActive = ref(false)
3
4defineShortcuts({
5  meta_k: {
6    handler: () => {
7      isActive.value = !isActive.value
8    }
9  }
10})
11</script>

I don't want to repeat the documentation, but let me highlight a few things:

• Shortcuts can be combined with the _ character. For example, meta_k is the meta key (Command key on MacOS, Control on other OS) key and the k key.
• usingInput is a flag that tells the composable to only trigger the shortcut when the user is not typing in an input field.
• whenever is used to add constraints so that the shortcut is only triggered when the constraints are met. For example, you can use whenever: [isActive] to only trigger the shortcut when isActive is true.

Source Code

You can grab the source code from GitHub