skills.rest
yoanbernabeu
yoanbernabeuCOMMUNITY
Explore all skills by this author →
Website𝕏@yOyO38GitHub

slidev-components

Embed Vue components into Slidev slides for interactive presentations.

34|1|Updated Jan 25, 2026
Search Tags:#components#vue#interactive#presentation#slidev#custom
One-click install
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slidev-components
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/content/slidev-components
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables users to embed Vue components directly into Slidev slides, allowing interactive UI elements, reusable components, and richer presentations without leaving Markdown.

Core Features & Use Cases

  • Built-in components: use and customize a set of ready-made interactive elements (e.g., Arrow, VDragArrow, AutoFitText, LightOrDark, Link, SlideCurrentNo, SlidesTotal, Toc, Transform, Tweet, Youtube, SlidevVideo) to enhance slides.
  • Custom components & patterns: create and reuse Vue components (e.g., Basic Component, Component with Slots, Component with Slidev Context, Code Demo) and embed them in slides for dynamic content.
  • Slidev context & interactivity: leverage Slidev composables and components (e.g., useNav, useSlideContext) to build context-aware UI and responsive presentations.
  • Use cases: build interactive demos, dashboards, or guided tutorials directly inside Slidev.

Quick Start

Use a simple interactive element on a slide:

  • Add a counter: <Counter :start="5" />
  • Use built-in components: <Arrow x1="10" y1="20" x2="100" y2="200" />
  • Insert a table of contents: <Toc />
  • Create and render a custom Card: <Card title="Important" color="blue">Content</Card>

Frequently Asked Questions about slidev-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add interactive Vue components to Slidev presentations?▼

You can add interactive Vue components to Slidev by embedding them directly into Markdown slides. This approach enables inserting built-in elements like <Counter> or <Arrow> and creating custom components for dynamic content without leaving the presentation file.

Can I create custom Vue components with Slidev context for dynamic presentations?▼

Yes, you can create custom Vue components that integrate with Slidev context. By leveraging composables like useNav and useSlideContext, you can build context-aware UI elements and responsive presentations directly inside your slides.

What built-in interactive elements are available for Slidev slides?▼

Slidev provides built-in interactive elements including Arrow, AutoFitText, LightOrDark, Toc, Tweet, and Youtube. You can use and customize these ready-made components to enhance your Markdown presentations with dynamic features.

Does Slidev support embedding reusable UI components in Markdown?▼

Yes, Slidev fully supports embedding reusable Vue components in Markdown. You can create components with slots and custom properties, then render them as interactive UI elements like a custom <Card> within your slides.

How do I build interactive demos and guided tutorials inside Slidev?▼

You build interactive demos and guided tutorials in Slidev by leveraging Vue components and Slidev context integration. This enables the creation of dynamic content, dashboards, and responsive UI elements directly within your presentation slides.

Related Skills

Explore More Design & Creative Skills→
ChrisTowlesChrisTowles
4

slidev

Create and edit Slidev presentation slides with Markdown and YAML frontmatter.

Community
Intermediate
mymx2mymx2
4

slidev

Generate and manage web-based slide decks from Markdown with Vue and Vite.

Community
Intermediate
partme-aipartme-ai
610

element-plus-vue3

Guide Element Plus Vue 3 component installation, theming, and API usage.

Official
Intermediate
claude-office-skillsclaude-office-skills
368

md-slides

Generate presentations from Markdown files using Marp and export to PDF, PPTX, or HTML.

Official
Intermediate