Slidev Project Structure

This skill helps you understand the complete structure of a Slidev project, including configuration files, directory conventions, and customization options.

When to Use This Skill

• Setting up a complex Slidev project

• Adding custom components or layouts

• Configuring themes and addons

• Understanding where to put assets and styles

• Troubleshooting project structure issues

Standard Project Structure

my-presentation/ ├── slides.md # Main presentation file ├── package.json # Project dependencies ├── components/ # Custom Vue components │ └── Counter.vue ├── layouts/ # Custom layouts │ └── my-layout.vue ├── pages/ # Additional slide files │ └── intro.md ├── public/ # Static assets │ ├── images/ │ └── favicon.ico ├── styles/ # Global styles │ └── index.css ├── setup/ # Setup scripts │ ├── main.ts # Vue app setup │ ├── monaco.ts # Monaco editor setup │ └── shiki.ts # Shiki highlighter setup ├── snippets/ # External code snippets │ └── example.ts ├── .slidev/ # Generated files (gitignore) │ └── drawings/ # Persisted drawings ├── vite.config.ts # Vite configuration ├── uno.config.ts # UnoCSS configuration └── netlify.toml # Deployment config (optional)

Core Files

slides.md

The main presentation file containing all slides:

theme: seriph title: My Presentation

Slide 1

Slide 2

package.json

Essential scripts and dependencies:

{ "name": "my-presentation", "private": true, "scripts": { "dev": "slidev --open", "build": "slidev build", "export": "slidev export" }, "dependencies": { "@slidev/cli": "^0.50.0", "@slidev/theme-seriph": "^0.25.0" } }

Global Configuration

Headmatter (First Slide)

The first slide's frontmatter configures the entire presentation:

Theme

theme: seriph addons:

• slidev-addon-excalidraw

Metadata

title: My Presentation titleTemplate: '%s - Slidev' info: |

Slidev Starter Template

Presentation slides for developers.

Appearance

colorSchema: auto aspectRatio: 16/9 canvasWidth: 980 themeConfig: primary: '#5d8392'

Code

highlighter: shiki lineNumbers: true monaco: true

Features

drawings: enabled: true persist: true presenterOnly: false syncAll: true selectable: true record: true

Navigation

transition: slide-left clicks: auto

Export

exportFilename: my-presentation download: true

Layout

layout: cover background: /cover.jpg class: text-center

Directory Conventions

components/

Custom Vue components auto-imported into slides:

<!-- components/Counter.vue --> <script setup lang="ts"> import { ref } from 'vue'

const count = ref(0) </script>

<template> <div class="flex items-center gap-4"> <button @click="count--">-</button> <span>{{ count }}</span> <button @click="count++">+</button> </div> </template>

Use in slides:

Interactive Counter

<Counter />

layouts/

Custom layouts extend built-in ones:

<!-- layouts/my-intro.vue --> <template> <div class="slidev-layout my-intro"> <div class="header"> <slot name="header" /> </div> <div class="main"> <slot /> </div> <div class="footer"> <slot name="footer"> <span>My Company</span> </slot> </div> </div> </template>

<style scoped> .my-intro { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 2rem; } </style>

Use in slides:

layout: my-intro

::header::

Welcome

::default:: Main content here

::footer:: Custom footer

public/

Static assets served at root URL:

public/ ├── images/ │ ├── logo.png # Use: /images/logo.png │ └── diagram.svg ├── favicon.ico # Use: /favicon.ico └── data.json # Use: /data.json

styles/

Global styles applied to all slides:

/* styles/index.css */ @import url('https://fonts.googleapis.com/css2?family=Inter&#x26;display=swap');

:root { --slidev-theme-primary: #3b82f6; }

.slidev-layout { font-family: 'Inter', sans-serif; }

/* Custom utility classes */ .highlight { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); padding: 0 0.25em; }

setup/

Configuration scripts:

// setup/main.ts - Vue app configuration import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app, router }) => { // Register global components // Configure plugins })

// setup/shiki.ts - Code highlighter import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => { return { themes: { dark: 'vitesse-dark', light: 'vitesse-light', }, } })

// setup/monaco.ts - Monaco editor import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(() => { return { editorOptions: { fontSize: 14, minimap: { enabled: false }, }, } })

pages/

Additional slide files for modular presentations:

<!-- pages/intro.md -->

Introduction Section

About Me

Agenda

Import in main file:

src: ./pages/intro.md

Main Content

src: ./pages/conclusion.md

Vite Configuration

// vite.config.ts import { defineConfig } from 'vite'

export default defineConfig({ slidev: { vue: { // Vue plugin options }, }, // Standard Vite options server: { port: 3030, }, })

UnoCSS Configuration

// uno.config.ts import { defineConfig } from 'unocss'

export default defineConfig({ shortcuts: { 'bg-main': 'bg-white dark:bg-slate-900', 'text-main': 'text-slate-900 dark:text-slate-100', }, theme: { colors: { primary: '#3b82f6', }, }, })

Theme Configuration

Using a Theme

theme: seriph themeConfig: primary: '#5d8392' secondary: '#8b5cf6'

Ejecting a Theme

To customize a theme's source code:

slidev theme eject

This copies the theme to your project for full customization.

Multi-File Presentations

Importing Slides

src: ./pages/section1.md

src: ./pages/section2.md

With Frontmatter Merging

src: ./pages/intro.md title: Overridden Title class: custom-class

Generated Files (.slidev/)

The .slidev/ directory contains:

• drawings/

• Persisted drawings

• Other generated assets

Add to .gitignore :

.slidev node_modules dist

Best Practices

• Keep slides.md focused: Use src imports for large presentations

• Organize assets: Use public/images/ for all images

• Reuse components: Create components for repeated patterns

• Version control: Commit all source files except .slidev/ and dist/

• Document custom layouts: Add comments explaining slot usage

Output Format

When explaining project structure, provide:

RECOMMENDED STRUCTURE: ├── slides.md # Main file ├── components/ # Custom Vue components ├── layouts/ # Custom layouts ├── public/ # Static assets ├── styles/ # Global CSS └── package.json # Dependencies

KEY CONFIGURATION:

• Theme: [theme name]
• Addons: [list of addons]
• Custom components: [component names]
• Custom layouts: [layout names]

FILES TO CREATE:

1. [filename] - [purpose]
2. [filename] - [purpose]

GITIGNORE: .slidev/ node_modules/ dist/