From Code to Conference: Creating Interactive Slides with Slidev and Vue.js
Slidev is a web-based presentation tool that allows you to create beautiful, interactive, and high-quality slides using Markdown and Vue.js components. It's designed specifically with developers in mind, offering a familiar, code-centric workflow.
For software engineers, Slidev transforms the often tedious task of creating presentations into a fun, efficient, and version-controlled coding task.
Plain Text/Markdown
The entire presentation content is written in a simple Markdown file (slides.md). This is the standard text format developers use every day, making writing slides as fast as writing documentation.
Version Control
Since the slides are just text files, you can easily track changes, collaborate, and revert versions using Git and GitHub. Say goodbye to "Final_Presentation_v3_really_final.pptx"!
Code Highlighting
Slidev automatically provides excellent syntax highlighting for code blocks using the Shiki engine (the same one VS Code uses).
Integrated Vue Components
You can embed custom Vue components directly into your slides. This is fantastic for live demos or showing interactive examples of the UI you are building.
Theme Customization
While it comes with great defaults, you can completely customize the look using CSS/Sass or by creating your own themes—a skill set every web developer already possesses.
Speaker Notes
Speaker notes can be written right inside the Markdown file and are displayed on a separate "Presenter Mode" screen, making practice and delivery easier.
Export Options
You can easily export your slides as a high-quality PDF or even a single-page web application that can be hosted anywhere.
Slidev is an NPM package, so you'll need Node.js installed first.
Open your terminal and run the following command in an empty directory
npm init slidev
This command will guide you through setting up a new project.
Once the setup is complete, navigate into the new project directory and start the server
cd <your-project-name>
npm run dev
The slides will open automatically in your browser (usually at http://localhost:3030). It features Hot Reloading, so any changes you save to the slides.md file will instantly update the browser view.
All your slides are defined in the slides.md file. Slides are separated by three dashes (---).
# slides.md
---
# Introduction to API Design
Hello everyone! We're here to talk about **RESTful API design**.
<div class="pt-2">
<img src="https://picsum.photos/400/200" class="rounded-lg shadow-xl" />
</div>
---
# Best Practices for HTTP
* Use **nouns** for resources (e.g., `/users`, `/products`).
* Use the correct **HTTP methods**:
* `GET` for reading data.
* `POST` for creating data.
* `PUT`/`PATCH` for updating data.
* `DELETE` for removing data.
> Speaker Notes: Emphasize the importance of idempotency with PUT vs. POST.
---
# Code Example: Fetching Users
We can see how a simple data fetch looks in JavaScript:
```js {all|1|2|3-4|5}
// Slide 3 - Example of code highlighting
async function fetchUsers() {
const response = await fetch('/api/v1/users');
const data = await response.json();
return data;
}
The {all|1|2|3-4|5} part is a Slidev feature called code stepping. It automatically creates multiple sub-slides to highlight one line/block at a time!
