Global Context

Slidev injects several global context values for advanced navigation controls.

Direct Usage

You can access them directly in your slides or components:

slides.md

# Page 1  Current page is: {{ $nav.currentPage }}

Foo.vue

<template>  <div>Title: {{ $slidev.configs.title }}</div>  <button @click="$nav.next">  Next Click  </button>  <button @click="$nav.nextSlide">  Next Slide  </button> </template>

Composable Usage

Available since v0.48.0

If you want to get the context programmatically (also type-safely), you can import composables from @slidev/client:

<script setup> import { onSlideEnter, onSlideLeave, useDarkMode, useIsSlideActive, useNav, useSlideContext } from '@slidev/client'  const { $slidev } = useSlideContext() const { currentPage, currentLayout, currentSlideRoute } = useNav() const { isDark } = useDarkMode() const isActive = useIsSlideActive() onSlideEnter(() => { /* ... */ }) onSlideLeave(() => { /* ... */ }) // ... </script>

NOTE

Previously, you might see the usage of importing nested modules like import { isDark } from '@slidev/client/logic/dark.ts', this is NOT RECOMMENDED as they are internal implementation details and may change in the future. Always use the public APIs from @slidev/client if possible.

WARNING

When the useSlideContext composable is used in a file, the automatic injection of $slidev will be disabled. You need to manually get the $slidev object to the useSlideContext function.

See also:

✨ Slide Hooks

Properties

$slidev

The global context object.

$frontmatter

The frontmatter object of the current slide. Note that this is empty for components out of the slides like ✨ Global Layers.

$clicks

$clicks hold the number of clicks on the current slide. Can be used conditionally to show different content on clicks.

<div v-if="$clicks > 3">Content</div>

See the 📖 Animations guide for more information.

$nav

A reactive object holding the properties and controls of the slide navigation. For examples:

$nav.next() // go next step $nav.nextSlide() // go next slide (skip clicks) $nav.go(10) // go slide #10  $nav.currentPage // current slide number $nav.currentLayout // current layout name

For more properties available, refer to the SlidevContextNav interface.

$page

$page holds the number of the current page, 1-indexed.

Page: {{ $page }}  Is current page active: {{ $page === $nav.currentPage }}

> `$nav.clicks` is a global state while `$clicks` is the local clicks number for each slide.

$renderContext

$renderContext holds the current render context, which can be slide, overview, presenter or previewNext

<div v-if="['slide', 'presenter'].includes($renderContext)">  This content will only be rendered in main slides view </div>

You can also use the <RenderWhen> component.

$slidev.configs

A reactive object holding the configurations for the slide project. For example:

--- title: My First Slidev! ---  # Page 1  ---  # Any Page  {{ $slidev.configs.title }} // 'My First Slidev!'

$slidev.themeConfigs

A reactive object holding the parsed theme configurations:

--- title: My First Slidev! themeConfig:  primary: '#213435' ---

Then the theme can access the primary color like:

{{ $slidev.themeConfigs.primary }} // '#213435'

Types

If you want to get a type programmatically, you can import types like TocItem from @slidev/types:

<script setup> import type { TocItem } from '@slidev/types'  function tocFunc(tree: TocItem[]): TocItem[] {  // ... } </script>