Core Global Context

Page {{ $page }} of {{ $nav.total }}
Title: {{ $slidev.configs.title }}

Layout: {{ $frontmatter.layout }}

import {
  useNav,
  useDarkMode,
  useIsSlideActive,
  useSlideContext,
  onSlideEnter,
  onSlideLeave,
} from '@slidev/client'

const nav = useNav()
nav.next()
nav.go(5)
console.log(nav.currentPage)

const { isDark, toggle } = useDarkMode()

const isActive = useIsSlideActive()
// Returns ref<boolean>

const { $page, $clicks, $frontmatter } = useSlideContext()

import { onSlideEnter, onSlideLeave } from '@slidev/client'

onSlideEnter((to, from) => {
  // Slide became active
  startAnimation()
})

onSlideLeave((to, from) => {
  // Slide became inactive
  cleanup()
})

<!-- Show only in presenter mode -->
<div v-if="$nav.isPresenter">
  Presenter notes
</div>

<!-- Hide on cover slide -->
<footer v-if="$nav.currentLayout !== 'cover'">
  Page {{ $nav.currentPage }}
</footer>

<!-- Different content by context -->
<template v-if="$renderContext === 'slide'">
  Normal view
</template>
<template v-else-if="$renderContext === 'presenter'">
  Presenter view
</template>

import type { TocItem } from '@slidev/types'