Configure Shortcuts

Available since v0.20

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 { defineShortcutsSetup, NavOperations } from '@slidev/types'

export default defineShortcutsSetup((nav: NavOperations) => {
  return [
    {
      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.

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