f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
156 lines
2.8 KiB
Markdown
156 lines
2.8 KiB
Markdown
---
|
|
name: global-context
|
|
description: Access navigation, slide info, and configuration programmatically
|
|
---
|
|
|
|
# Global Context & API
|
|
|
|
Access navigation, slide info, and configuration programmatically.
|
|
|
|
## Template Variables
|
|
|
|
Available in slides and components:
|
|
|
|
```md
|
|
Page {{ $page }} of {{ $nav.total }}
|
|
Title: {{ $slidev.configs.title }}
|
|
```
|
|
|
|
### $nav
|
|
|
|
Navigation state and controls:
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| `$nav.currentPage` | number | Current page (1-indexed) |
|
|
| `$nav.currentLayout` | string | Current layout name |
|
|
| `$nav.total` | number | Total slides |
|
|
| `$nav.isPresenter` | boolean | In presenter mode |
|
|
| `$nav.next()` | function | Next click/slide |
|
|
| `$nav.prev()` | function | Previous click/slide |
|
|
| `$nav.nextSlide()` | function | Next slide |
|
|
| `$nav.prevSlide()` | function | Previous slide |
|
|
| `$nav.go(n)` | function | Go to slide n |
|
|
|
|
### $slidev
|
|
|
|
Global context:
|
|
|
|
| Property | Description |
|
|
|----------|-------------|
|
|
| `$slidev.configs` | Project config (title, etc.) |
|
|
| `$slidev.themeConfigs` | Theme config |
|
|
|
|
### $frontmatter
|
|
|
|
Current slide frontmatter:
|
|
|
|
```md
|
|
Layout: {{ $frontmatter.layout }}
|
|
```
|
|
|
|
### $clicks
|
|
|
|
Current click count on slide.
|
|
|
|
### $page
|
|
|
|
Current page number (1-indexed).
|
|
|
|
### $renderContext
|
|
|
|
Current render context:
|
|
- `'slide'` - Normal slide view
|
|
- `'overview'` - Overview mode
|
|
- `'presenter'` - Presenter mode
|
|
- `'previewNext'` - Next slide preview
|
|
|
|
## Composables
|
|
|
|
Import from `@slidev/client`:
|
|
|
|
```ts
|
|
import {
|
|
useNav,
|
|
useDarkMode,
|
|
useIsSlideActive,
|
|
useSlideContext,
|
|
onSlideEnter,
|
|
onSlideLeave,
|
|
} from '@slidev/client'
|
|
```
|
|
|
|
### useNav
|
|
|
|
```ts
|
|
const nav = useNav()
|
|
nav.next()
|
|
nav.go(5)
|
|
console.log(nav.currentPage)
|
|
```
|
|
|
|
### useDarkMode
|
|
|
|
```ts
|
|
const { isDark, toggle } = useDarkMode()
|
|
```
|
|
|
|
### useIsSlideActive
|
|
|
|
```ts
|
|
const isActive = useIsSlideActive()
|
|
// Returns ref<boolean>
|
|
```
|
|
|
|
### useSlideContext
|
|
|
|
```ts
|
|
const { $page, $clicks, $frontmatter } = useSlideContext()
|
|
```
|
|
|
|
## Lifecycle Hooks
|
|
|
|
```ts
|
|
import { onSlideEnter, onSlideLeave } from '@slidev/client'
|
|
|
|
onSlideEnter(() => {
|
|
// Slide became active
|
|
startAnimation()
|
|
})
|
|
|
|
onSlideLeave(() => {
|
|
// Slide became inactive
|
|
cleanup()
|
|
})
|
|
```
|
|
|
|
**Important:** Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.
|
|
|
|
## Conditional Rendering Examples
|
|
|
|
```html
|
|
<!-- Show only in presenter mode -->
|
|
<div v-if="$nav.isPresenter">
|
|
Presenter notes
|
|
</div>
|
|
|
|
<!-- Hide on cover slide -->
|
|
<footer v-if="$nav.currentLayout !== 'cover'">
|
|
Page {{ $nav.currentPage }}
|
|
</footer>
|
|
|
|
<!-- Different content by context -->
|
|
<template v-if="$renderContext === 'slide'">
|
|
Normal view
|
|
</template>
|
|
<template v-else-if="$renderContext === 'presenter'">
|
|
Presenter view
|
|
</template>
|
|
```
|
|
|
|
## Type Imports
|
|
|
|
```ts
|
|
import type { TocItem } from '@slidev/types'
|
|
```
|