Vue Global Context

Slidev injected a global Vue context $slidev for advanced conditions or navigation controls.


You can access it anywhere in your markdown and Vue template, with the "Mustache" syntax.

<!-- -->

# Page 1

Current page is: {{ $slidev.nav.currentPage }}
<!-- Foo.vue -->

  <div>Title: {{ $slidev.configs.title }}</div>
  <button @click="$">Next Page</button>



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

$ // go next step

$slidev.nav.nextSlide() // go next slide (skip v-clicks)

$slidev.nav.go(10) // go slide #10
$slidev.nav.currentPage // current slide number

$slidev.nav.currentLayout // current layout id

$slidev.nav.clicks // current clicks count

For more properties available, refer to the nav.ts exports.


A reactive object holding the parsed configurations in the first frontmatter of your For example

title: My First Slidev!
{{ $slidev.configs.title }} // 'My First Slidev!'


A reactive object holding the parsed theme configurations.

title: My First Slidev!
  primary: #213435
{{ $slidev.themeConfigs.primary }} // '#213435'