| 1 | # Global Context |
| 2 | |
| 3 | Slidev injects several global context values for advanced navigation controls. |
| 4 | |
| 5 | ## Direct Usage {#direct-usage} |
| 6 | |
| 7 | You can access them directly in your slides or components: |
| 8 | |
| 9 | ```md [slides.md] |
| 10 | # Page 1 |
| 11 | |
| 12 | Current page is: {{ $nav.currentPage }} |
| 13 | ``` |
| 14 | |
| 15 | ```vue [Foo.vue] |
| 16 | <template> |
| 17 | <div>Title: {{ $slidev.configs.title }}</div> |
| 18 | <button @click="$nav.next"> |
| 19 | Next Click |
| 20 | </button> |
| 21 | <button @click="$nav.nextSlide"> |
| 22 | Next Slide |
| 23 | </button> |
| 24 | </template> |
| 25 | ``` |
| 26 | |
| 27 | ## Composable Usage {#composable-usage} |
| 28 | |
| 29 | > Available since v0.48.0 |
| 30 | |
| 31 | If you want to get the context programmatically (also type-safely), you can import composables from `@slidev/client`: |
| 32 | |
| 33 | ```vue |
| 34 | <script setup> |
| 35 | import { onSlideEnter, onSlideLeave, useDarkMode, useIsSlideActive, useNav, useSlideContext } from '@slidev/client' |
| 36 | |
| 37 | const { $slidev } = useSlideContext() |
| 38 | const { currentPage, currentLayout, currentFrontmatter, currentSlideRoute } = useNav() |
| 39 | const { isDark } = useDarkMode() |
| 40 | const isActive = useIsSlideActive() |
| 41 | onSlideEnter((to, from) => { /* ... */ }) |
| 42 | onSlideLeave((to, from) => { /* ... */ }) |
| 43 | // ... |
| 44 | </script> |
| 45 | ``` |
| 46 | |
| 47 | > [!NOTE] |
| 48 | > 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. |
| 49 | |
| 50 | ::: warning |
| 51 | |
| 52 | 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. |
| 53 | |
| 54 | ::: |
| 55 | |
| 56 | <SeeAlso :links="['features/slide-hook']" /> |
| 57 | |
| 58 | ## Properties {#properties} |
| 59 | |
| 60 | ### `$slidev` {#slidev} |
| 61 | |
| 62 | The global context object. |
| 63 | |
| 64 | ### `$frontmatter` {#frontmatter} |
| 65 | |
| 66 | The frontmatter object of the current slide. Note that this is empty for components out of the slides like <LinkInline link="features/global-layers" />. |
| 67 | |
| 68 | ### `$clicks` {#clicks} |
| 69 | |
| 70 | `$clicks` hold the number of clicks on the current slide. Can be used conditionally to show different content on clicks. |
| 71 | |
| 72 | ```html |
| 73 | <div v-if="$clicks > 3">Content</div> |
| 74 | ``` |
| 75 | |
| 76 | See the <LinkInline link="guide/animations" /> guide for more information. |
| 77 | |
| 78 | ### `$nav` {#nav} |
| 79 | |
| 80 | A reactive object holding the properties and controls of the slide navigation. For examples: |
| 81 | |
| 82 | ```js |
| 83 | $nav.next() // go next step |
| 84 | $nav.nextSlide() // go next slide (skip clicks) |
| 85 | $nav.go(10) // go slide #10 |
| 86 | |
| 87 | $nav.currentPage // current slide number |
| 88 | $nav.currentLayout // current layout name |
| 89 | $nav.currentFrontmatter // current slide frontmatter, including custom fields |
| 90 | ``` |
| 91 | |
| 92 | For more properties available, refer to the [`SlidevContextNav` interface](https://github.com/slidevjs/slidev/blob/main/packages/client/composables/useNav.ts). |
| 93 | |
| 94 | ### `$page` {#page} |
| 95 | |
| 96 | `$page` holds the number of the current page, 1-indexed. |
| 97 | |
| 98 | ```md |
| 99 | Page: {{ $page }} |
| 100 | |
| 101 | Is current page active: {{ $page === $nav.currentPage }} |
| 102 | ``` |
| 103 | |
| 104 | > [!Note] > `$nav.clicks` is a global state while `$clicks` is the local clicks number for each slide. |
| 105 | |
| 106 | ### `$renderContext` {#render-context} |
| 107 | |
| 108 | `$renderContext` holds the current render context, which can be `slide`, `overview`, `presenter` or `previewNext` |
| 109 | |
| 110 | ```md |
| 111 | <div v-if="['slide', 'presenter'].includes($renderContext)"> |
| 112 | This content will only be rendered in main slides view |
| 113 | </div> |
| 114 | ``` |
| 115 | |
| 116 | You can also use the [`<RenderWhen>` component](../builtin/components#renderwhen). |
| 117 | |
| 118 | ### `$slidev.configs` {#configs} |
| 119 | |
| 120 | A reactive object holding the configurations for the slide project. For example: |
| 121 | |
| 122 | ```md |
| 123 | --- |
| 124 | title: My First Slidev! |
| 125 | --- |
| 126 | |
| 127 | # Page 1 |
| 128 | |
| 129 | --- |
| 130 | |
| 131 | # Any Page |
| 132 | |
| 133 | {{ $slidev.configs.title }} // 'My First Slidev!' |
| 134 | ``` |
| 135 | |
| 136 | ### `$slidev.themeConfigs` {#theme-configs} |
| 137 | |
| 138 | A reactive object holding the parsed theme configurations: |
| 139 | |
| 140 | ```yaml |
| 141 | --- |
| 142 | title: My First Slidev! |
| 143 | themeConfig: |
| 144 | primary: '#213435' |
| 145 | --- |
| 146 | ``` |
| 147 | |
| 148 | Then the theme can access the primary color like: |
| 149 | |
| 150 | ```md |
| 151 | {{ $slidev.themeConfigs.primary }} // '#213435' |
| 152 | ``` |
| 153 | |
| 154 | ## Types {#types} |
| 155 | |
| 156 | If you want to get a type programmatically, you can import types like `TocItem` from `@slidev/types`: |
| 157 | |
| 158 | ```vue |
| 159 | <script setup> |
| 160 | import type { TocItem } from '@slidev/types' |
| 161 | |
| 162 | function tocFunc(tree: TocItem[]): TocItem[] { |
| 163 | // ... |
| 164 | } |
| 165 | </script> |
| 166 | ``` |
| 167 |