g → 15 → Enter

import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // Keep default shortcuts
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
    {
      key: 'ctrl+f',
      fn: () => nav.go(1),
    },
  ]
})

// Single key
{ key: 'enter', fn: () => {} }

// Modifier + key
{ key: 'ctrl+s', fn: () => {} }

// Multiple modifiers
{ key: 'ctrl+shift+s', fn: () => {} }

<script setup>
import { useNav } from '@slidev/client'

const {
  currentSlideNo,  // Current slide number (ref)
  currentPage,     // Current page number
  total,           // Total slides
  clicks,          // Current click count
  next,            // Go to next
  prev,            // Go to previous
  go,              // Go to slide number
  nextSlide,       // Next slide (skip animations)
  prevSlide,       // Previous slide (skip animations)
} = useNav()
</script>

<template>
  <!-- Custom navigation buttons -->
  <button @click="nav.prev()">Previous</button>
  <button @click="nav.next()">Next</button>
  <button @click="nav.go(1)">Go to Start</button>
  <button @click="nav.go(total.value)">Go to End</button>
</template>

<script setup>
import { useNav } from '@slidev/client'
const nav = useNav()
</script>

<!-- components/ProgressBar.vue -->
<script setup>
import { computed } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo, total } = useNav()
const progress = computed(() =>
  (currentSlideNo.value / total.value) * 100
)
</script>

<template>
  <div class="fixed top-0 left-0 right-0 h-1 bg-gray-200">
    <div
      class="h-full bg-blue-500 transition-all"
      :style="{ width: `${progress}%` }"
    />
  </div>
</template>

<!-- components/PageNumber.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 right-4 text-sm">
    {{ currentSlideNo }} / {{ total }}
  </div>
</template>

<!-- components/NavButtons.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { prev, next, currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 flex gap-2">
    <button
      @click="prev()"
      :disabled="currentSlideNo === 1"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      Previous
    </button>
    <button
      @click="next()"
      :disabled="currentSlideNo === total"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      Next
    </button>
  </div>
</template>

---
# In frontmatter
---

.slidev-page {
  pointer-events: none;
}

http://localhost:3030/5      # Slide 5
http://localhost:3030/10     # Slide 10

http://localhost:3030/presenter
http://localhost:3030/presenter/5  # Presenter at slide 5

http://localhost:3030/overview

---
routeAlias: introduction
---

http://localhost:3030/introduction

[Go to Introduction](/introduction)

<script setup>
import { watch } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo } = useNav()

watch(currentSlideNo, (newSlide, oldSlide) => {
  console.log(`Navigated from ${oldSlide} to ${newSlide}`)
})
</script>

// If you prefer Enter/Backspace
{
  key: 'enter',
  fn: () => nav.next(),
}

.slidev-nav {
  display: none;
}

// setup/shortcuts.ts
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // Keep defaults

    // Custom shortcuts
    { key: '[key]', fn: () => nav.[action]() },
  ]
})