skills/slidev/references/core-components.md
Ready-to-use components in Slidev.
Navigate to slide:
<Link to="5">Go to slide 5</Link>
<Link to="intro">Go to intro</Link> <!-- with routeAlias -->
Slide <SlideCurrentNo /> of <SlidesTotal />
<Toc />
<Toc maxDepth="2" />
<Toc columns="2" />
Props:
columns - Number of columnsmaxDepth / minDepth - Heading depth filtermode - 'all' | 'onlyCurrentTree' | 'onlySiblings'Render slide title:
<TitleRenderer no="3" />
<VClick>Shows on click</VClick>
<VClicks>
- Item 1
- Item 2
</VClicks>
<VClick>First</VClick>
<VAfter>Shows with first</VAfter>
<VSwitch>
<template #1>State 1</template>
<template #2>State 2</template>
</VSwitch>
<Arrow x1="10" y1="10" x2="100" y2="100" />
<Arrow x1="10" y1="10" x2="100" y2="100" two-way />
Props: x1, y1, x2, y2, width, color, two-way
Draggable arrow:
<VDragArrow />
Scale elements:
<Transform :scale="0.5">
<LargeContent />
</Transform>
Props: scale, origin
Auto-sizing text:
<AutoFitText :max="200" :min="50" modelValue="Hello" />
<SlidevVideo v-click autoplay controls>
<source src="/video.mp4" type="video/mp4" />
</SlidevVideo>
Props: controls, autoplay, autoreset, poster, timestamp
<Youtube id="dQw4w9WgXcQ" />
<Youtube id="dQw4w9WgXcQ" width="600" height="400" />
<Tweet id="1423789844234231808" />
<Tweet id="1423789844234231808" :scale="0.8" />
<LightOrDark>
<template #dark>Dark mode content</template>
<template #light>Light mode content</template>
</LightOrDark>
<RenderWhen context="presenter">
Only in presenter mode
</RenderWhen>
Context values:
main - Main presentation viewvisible - Visible slidesprint - Print/export modeslide - Normal slide viewoverview - Overview modepresenter - Presenter modepreviewNext - Next slide preview<PoweredBySlidev />
<VDrag pos="myElement">
Draggable content
</VDrag>
See draggable for details.
Components from these sources are auto-imported:
./components/ directoryNo import statements needed.