slidev-components

Slidev コンポーネント

このスキルでは、Slidev での Vue コンポーネントの使用方法を説明します。組み込みコンポーネントのすべてと、プレゼンテーション用のカスタムインタラクティブ要素の作成方法を含みます。

このスキルを使用する場面

• スライドにインタラクティブ要素を追加する
• 組み込みの Slidev コンポーネントを使用する
• カスタム Vue コンポーネントを作成する
• 再利用可能なプレゼンテーション要素を構築する
• 動的コンテンツを追加する

コンポーネントの使用

コンポーネントは Markdown から直接使用できます。

# My Slide

<MyComponent />

<Counter :start="5" />

組み込みコンポーネント

Arrow

点と点の間に矢印を描画します。

<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：開始座標
• x2、y2：終了座標
• color：矢印の色
• width：線の幅

VDragArrow

ドラッグ可能な矢印です（プレゼンテーションに便利です）。

<VDragArrow />

AutoFitText

コンテナーに収まるよう、フォントサイズを自動調整します。

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

Props:

• max：フォントサイズの最大値
• min：フォントサイズの最小値
• modelValue：テキストコンテンツ

LightOrDark

テーマに応じて異なるコンテンツを表示します。

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

Link

ほかのスライドへのナビゲーションリンクです。

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

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

SlideCurrentNo / SlidesTotal

スライド番号を表示します。

Slide <SlideCurrentNo /> of <SlidesTotal />

Toc（目次）

目次を生成します。

<Toc />

<Toc maxDepth="2" />

<Toc mode="onlyCurrentTree" />

Props:

• maxDepth：見出しの最大階層
• mode：表示モード（all、onlyCurrentTree、onlySiblings）

Transform

CSS トランスフォームを適用します。

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

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

Props:

• scale：拡大縮小率
• rotate：回転角度（度）

Tweet

ツイートを埋め込みます。

<Tweet id="1234567890" />

<Tweet id="1234567890" scale="0.8" />

Youtube

YouTube 動画を埋め込みます。

<Youtube id="dQw4w9WgXcQ" />

<Youtube id="dQw4w9WgXcQ" width="560" height="315" />

Props:

• id：YouTube 動画 ID
• width、height：サイズ

SlidevVideo

動画ファイルを埋め込みます。

<SlidevVideo v-click autoplay controls>
  <source src="/video.mp4" type="video/mp4" />
</SlidevVideo>

Props:

• autoplay：スライド表示時に自動再生する
• controls：動画コントロールを表示する
• loop：動画をループ再生する

RenderWhen

コンテキストに基づいて条件付きで描画します。

<RenderWhen context="slide">
  Only visible in slide view
</RenderWhen>

<RenderWhen context="presenter">
  Only visible in presenter view
</RenderWhen>

コンテキストの選択肢：slide、presenter、previewNext、print

VDrag

要素をドラッグ可能にします。

<VDrag>
  <div class="p-4 bg-blue-500 text-white">
    Drag me!
  </div>
</VDrag>

<VDrag :initialX="100" :initialY="50">
  Positioned draggable
</VDrag>

アニメーションコンポーネント

VClick

クリック時に表示します。

<v-click>

Revealed on first click

</v-click>

<v-click at="2">

Revealed on second click

</v-click>

VClicks

子要素を順番に表示します。

<v-clicks>

- First item
- Second item
- Third item

</v-clicks>

Props:

• depth：ネストされたリストの階層
• every：クリックごとに表示する項目数

VAfter

前の要素と同時に表示します。

<v-click>First</v-click>
<v-after>Appears with first</v-after>

VSwitch

クリックに応じてコンテンツを切り替えます。

<v-switch>
  <template #1>Step 1 content</template>
  <template #2>Step 2 content</template>
  <template #3>Step 3 content</template>
</v-switch>

カスタムコンポーネントの作成

基本的なコンポーネント

components/Counter.vue を作成します。

<script setup>
import { ref } from 'vue'

const props = defineProps({
  start: {
    type: Number,
    default: 0
  }
})

const count = ref(props.start)
</script>

<template>
  <div class="counter">
    <button @click="count--">-</button>
    <span class="count">{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<style scoped>
.counter {
  display: flex;
  align-items: center;
  gap: 1rem;
}
button {
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}
.count {
  font-size: 2rem;
  min-width: 3rem;
  text-align: center;
}
</style>

使用例：

# Interactive Counter

<Counter :start="10" />

スロット付きコンポーネント

<script setup>
defineProps({
  title: String,
  color: {
    type: String,
    default: 'blue'
  }
})
</script>

<template>
  <div :class="`card card-${color}`">
    <h3 v-if="title">{{ title }}</h3>
    <slot />
  </div>
</template>

<style scoped>
.card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}
.card-blue { background: #3b82f6; color: white; }
.card-green { background: #22c55e; color: white; }
.card-red { background: #ef4444; color: white; }
</style>

使用例：

<Card title="Important" color="red">
  This is a red card with important content.
</Card>

Slidev コンテキスト付きコンポーネント

<script setup>
import { computed } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo, total } = useNav()

const progress = computed(() =>
  (currentSlideNo.value / total.value) * 100
)
</script>

<template>
  <div class="progress-bar">
    <div
      class="progress"
      :style="{ width: `${progress}%` }"
    />
  </div>
</template>

<style scoped>
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #e5e7eb;
}
.progress {
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s;
}
</style>

コードデモコンポーネント

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  code: String,
  language: {
    type: String,
    default: 'javascript'
  }
})

const output = ref('')
const error = ref('')

const run = () => {
  try {
    output.value = eval(props.code)
    error.value = ''
  } catch (e) {
    error.value = e.message
    output.value = ''
  }
}
</script>

<template>
  <div class="code-demo">
    <pre><code>{{ code }}</code></pre>
    <button @click="run">Run</button>
    <div v-if="output" class="output">{{ output }}</div>
    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

コンポーザブル

useNav

ナビゲーションの状態にアクセスします。

<script setup>
import { useNav } from '@slidev/client'

const {
  currentSlideNo,  // Current slide number
  total,           // Total slides
  next,            // Go to next
  prev,            // Go to previous
  go               // Go to specific slide
} = useNav()
</script>

useSlideContext

スライドのコンテキストにアクセスします。

<script setup>
import { useSlideContext } from '@slidev/client'

const {
  $slidev,         // Global context
  $clicks,         // Current click count
  $page            // Current page number
} = useSlideContext()
</script>

グローバルコンポーネント

global-top.vue

すべてのスライドの上に表示されます。

<template>
  <div class="absolute top-4 right-4">
    <img src="/logo.png" class="h-8" />
  </div>
</template>

global-bottom.vue

すべてのスライドの下に表示されます。

<template>
  <footer class="absolute bottom-4 left-4 text-sm opacity-50">
    © 2025 My Company
  </footer>
</template>

コンポーネントのパターン

進捗インジケーター

<div class="fixed bottom-4 right-4 text-sm">
  <SlideCurrentNo /> / <SlidesTotal />
</div>

ソーシャルリンク

<template>
  <div class="flex gap-4">
    <a href="https://twitter.com/..." target="_blank">
      <carbon-logo-twitter class="text-2xl" />
    </a>
    <a href="https://github.com/..." target="_blank">
      <carbon-logo-github class="text-2xl" />
    </a>
  </div>
</template>

QR コード

<script setup>
import { ref, onMounted } from 'vue'
import QRCodeLib from 'qrcode'

const props = defineProps({
  url: String,
  size: { type: Number, default: 200 }
})

const qrDataUrl = ref('')

onMounted(async () => {
  qrDataUrl.value = await QRCodeLib.toDataURL(props.url, {
    width: props.size
  })
})
</script>

<template>
  <img :src="qrDataUrl" :width="size" :height="size" />
</template>

ベストプラクティス

1. コンポーネントをシンプルに保つ：単一の責務に集中させます
2. Props を使用する：コンポーネントを設定可能にします
3. スタイルの適用範囲を限定する：グローバルなスタイルへの影響を避けます
4. 使用方法を記載する：使い方を示すコメントを追加します
5. インタラクティブ性をテストする：プレゼンターモードでコンポーネントが動作することを確認します

出力形式

コンポーネントを作成するときは、以下を提示します。

COMPONENT: [name]
PURPOSE: [what it does]

FILE: components/[Name].vue
---
<script setup>
[script content]
</script>

<template>
[template content]
</template>

<style scoped>
[styles]
</style>
---

USAGE IN SLIDES:
```markdown
<[Name] prop="value" />

PROPS:

• [propName]: [type] - [description]