core-global-context.md - slidev

core-global-context.md

1	---
2	name: global-context
3	description: Access navigation, slide info, and configuration programmatically
4	---
5
6	# Global Context & API
7
8	Access navigation, slide info, and configuration programmatically.
9
10	## Template Variables
11
12	Available in slides and components:
13
14	```md
15	Page {{ $page }} of {{ $nav.total }}
16	Title: {{ $slidev.configs.title }}
17	```
18
19	### $nav
20
21	Navigation state and controls:
22
23	\| Property \| Type \| Description \|
24	\|----------\|------\|-------------\|
25	\| `$nav.currentPage` \| number \| Current page (1-indexed) \|
26	\| `$nav.currentLayout` \| string \| Current layout name \|
27	\| `$nav.total` \| number \| Total slides \|
28	\| `$nav.isPresenter` \| boolean \| In presenter mode \|
29	\| `$nav.next()` \| function \| Next click/slide \|
30	\| `$nav.prev()` \| function \| Previous click/slide \|
31	\| `$nav.nextSlide()` \| function \| Next slide \|
32	\| `$nav.prevSlide()` \| function \| Previous slide \|
33	\| `$nav.go(n)` \| function \| Go to slide n \|
34
35	### $slidev
36
37	Global context:
38
39	\| Property \| Description \|
40	\|----------\|-------------\|
41	\| `$slidev.configs` \| Project config (title, etc.) \|
42	\| `$slidev.themeConfigs` \| Theme config \|
43
44	### $frontmatter
45
46	Current slide frontmatter:
47
48	```md
49	Layout: {{ $frontmatter.layout }}
50	```
51
52	### $clicks
53
54	Current click count on slide.
55
56	### $page
57
58	Current page number (1-indexed).
59
60	### $renderContext
61
62	Current render context:
63	- `'slide'` - Normal slide view
64	- `'overview'` - Overview mode
65	- `'presenter'` - Presenter mode
66	- `'previewNext'` - Next slide preview
67
68	## Composables
69
70	Import from `@slidev/client`:
71
72	```ts
73	import {
74	useNav,
75	useDarkMode,
76	useIsSlideActive,
77	useSlideContext,
78	onSlideEnter,
79	onSlideLeave,
80	} from '@slidev/client'
81	```
82
83	### useNav
84
85	```ts
86	const nav = useNav()
87	nav.next()
88	nav.go(5)
89	console.log(nav.currentPage)
90	```
91
92	### useDarkMode
93
94	```ts
95	const { isDark, toggle } = useDarkMode()
96	```
97
98	### useIsSlideActive
99
100	```ts
101	const isActive = useIsSlideActive()
102	// Returns ref<boolean>
103	```
104
105	### useSlideContext
106
107	```ts
108	const { $page, $clicks, $frontmatter } = useSlideContext()
109	```
110
111	## Lifecycle Hooks
112
113	```ts
114	import { onSlideEnter, onSlideLeave } from '@slidev/client'
115
116	onSlideEnter((to, from) => {
117	// Slide became active
118	startAnimation()
119	})
120
121	onSlideLeave((to, from) => {
122	// Slide became inactive
123	cleanup()
124	})
125	```
126
127	Important: Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.
128
129	## Conditional Rendering Examples
130
131	```html
132	<!-- Show only in presenter mode -->
133	<div v-if="$nav.isPresenter">
134	Presenter notes
135	</div>
136
137	<!-- Hide on cover slide -->
138	<footer v-if="$nav.currentLayout !== 'cover'">
139	Page {{ $nav.currentPage }}
140	</footer>
141
142	<!-- Different content by context -->
143	<template v-if="$renderContext === 'slide'">
144	Normal view
145	</template>
146	<template v-else-if="$renderContext === 'presenter'">
147	Presenter view
148	</template>
149	```
150
151	## Type Imports
152
153	```ts
154	import type { TocItem } from '@slidev/types'
155	```
156

156 lines MARKDOWN