Vue Global Context #

Kolibry injected a global Vue context $kolibry for advanced conditions or navigation controls.

Usage #

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

<!-- slides.md -->

# Page 1

Current page is: {{ $kolibry.nav.currentPage }}

<!-- Foo.vue -->

<template>
  <div>Title: {{ $kolibry.configs.title }}</div>
  <button @click="$kolibry.nav.next">Next Page</button>
</template>

Properties #

$clicks #

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

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

$page #

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

Page: {{ $page }}

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

$renderContext #

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

<div v-if="$renderContext === 'slide'">
  This content will only be rendered in slides view
</div>

$kolibry.nav #

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

$kolibry.nav.next() // go next step

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

$kolibry.nav.go(10) // go slide #10

$kolibry.nav.currentPage // current slide number

$kolibry.nav.currentLayout // current layout id

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

Note: $kolibry.nav.clicks is a global state while $clicks is local to each slide. It's recommended to use $clicks over $kolibry.nav.clicks to avoid clicks changed been triggered on page transitions.

$kolibry.configs #

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

---
title: My First Kolibry!
---

{{ $kolibry.configs.title }} // 'My First Kolibry!'

$kolibry.themeConfigs #

A reactive object holding the parsed theme configurations.

---
title: My First Kolibry!
themeConfig:
  primary: #213435
---

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

$nav #

A shorthand of $kolibry.nav.