slidev-components

Slidev Components

This skill covers using Vue components in Slidev, including all built-in components and how to create custom interactive elements for your presentations.

When to Use This Skill

• Adding interactive elements to slides
• Using built-in Slidev components
• Creating custom Vue components
• Building reusable presentation elements
• Adding dynamic content

Using Components

Components can be used directly in Markdown:

# My Slide

<MyComponent />

<Counter :start="5" />

Built-in Components

Arrow

Draws an arrow between points.

<Arrow x1="10" y1="20" x2="100" y2="200" />

<Arrow
  x1="10"
  y1="20"
  x2="100"
  y2="200"
  color="#f00"
  width="3"
/>

Props:

• x1, y1: Start coordinates
• x2, y2: End coordinates
• color: Arrow color
• width: Line width

VDragArrow

Draggable arrow (useful for presentations).

<VDragArrow />

AutoFitText

Automatically adjusts font size to fit container.

<AutoFitText :max="200" :min="50" modelValue="My Text" />

Props:

• max: Maximum font size
• min: Minimum font size
• modelValue: Text content

LightOrDark

Renders different content based on theme.

<LightOrDark>
  <template #light>
    <img src="/logo-dark.png" />
  </template>
  <template #dark>
    <img src="/logo-light.png" />
  </template>
</LightOrDark>

Link

Navigation link to other slides.

<Link to="42">Go to slide 42</Link>

<Link to="/intro">Go to intro</Link>

SlideCurrentNo / SlidesTotal

Display slide numbers.

Slide <SlideCurrentNo /> of <SlidesTotal />

Toc (Table of Contents)

Generates a table of contents.

<Toc />

<Toc maxDepth="2" />

<Toc mode="onlyCurrentTree" />

Props:

• maxDepth: Maximum heading depth
• mode: Display mode (all, onlyCurrentTree, onlySiblings)

Transform

Applies CSS transforms.

<Transform :scale="1.5">
  <div>Scaled content</div>
</Transform>

<Transform :scale="0.8" :rotate="10">
  Rotated and scaled
</Transform>