Configure Shortcuts

Available since v0.20

Since v0.35.6 (excluded), you decide which base shortcuts to keep (see ...base, below).

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

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,
    },
  ]
})

With the setup, you can provide the custom setting for shortcuts mentioned in Navigation. The above configuration binds next animation or slide to enter and previous animation or slide to backspace.

The configuration function receives an object with some navigation methods, and returns an array containing some shortcut configuration. Refer to the type definitions for more details.

The key type only allows for strings, but you can still bind multiple keys by using following convention:

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

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base,
    {
      key: 'ShiftLeft+ArrowRight',
      fn: () => nav.next(),
      autoRepeat: true,
    }
  ]
})

Refer to useMagicKeys | VueUse for more details about key pressed event.