slidev-project-structure

name	slidev-project-structure
description	Understand Slidev project structure and configuration. Use this skill to configure themes, addons, and customize your presentation setup.

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: 


 
 
 

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&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

1. Keep slides.md focused: Use src imports for large presentations
2. Organize assets: Use public/images/ for all images
3. Reuse components: Create components for repeated patterns
4. Version control: Commit all source files except .slidev/ and dist/
5. 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/