Configure Shortcuts

Environment: client

This setup function will only run on client side. Make sure the browser compatibility when importing packages.

Getting started

Create ./setup/shortcuts.ts with the following content:

import type { NavOperations, ShortcutOptions } from '@slidev/types'
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base, // keep the existing shortcuts
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
  ]
})

In the setup function, you can customize the keyboard shortcuts by returning a new array of shortcuts. The above example binds the next operation to enter and the prev operation to backspace.

Please refer to Navigation Actions section for the default shortcuts and navigation operations.

Key Binding Format

The key of each shortcut can be either a string (e.g. 'Shift+Ctrl+A') or a computed boolean. Please refer to useMagicKeys from VueUse for