### Install Slidev CLI Globally for Single File Usage

Source: https://sli.dev/guide/index

Instructions for globally installing the Slidev CLI using various package managers. This allows for creating and running presentations from a single Markdown file.

```bash
pnpm i -g @slidev/cli
```

```bash
npm i -g @slidev/cli
```

```bash
yarn global add @slidev/cli
```

```bash
bun i -g @slidev/cli
```

```bash
deno i -g npm:@slidev/cli
```

--------------------------------

### Slidev Package.json Scripts

Source: https://sli.dev/guide/index

Example of common Slidev commands configured as scripts within a package.json file. These scripts facilitate running the development server, building, and exporting presentations.

```json
{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}
```

--------------------------------

### Create Slidev Project Locally (Multiple Package Managers)

Source: https://sli.dev/guide/index

This snippet demonstrates how to create a new Slidev project locally using different package managers like pnpm, npm, yarn, bun, and deno. Ensure Node.js is installed.

```bash
# If you haven't installed pnpm
pnpm i -g pnpm

pnpm create slidev
```

```bash
# Not recommended -
# NPM will download the packages each time you create a new project,
# which is slow and takes up a lot of space

npm init slidev@latest
```

```bash
yarn create slidev
```

```bash
bun create slidev
```

```bash
deno init --npm slidev
```

--------------------------------

### v-click Synchronization Example

Source: https://sli.dev/guide/animations

Shows how to synchronize the highlighting or visibility of multiple code blocks using the v-click directive with specific line highlighting.

```js
```js {1|2}{at:1}
1 + 1
'a' + 'b'
```

```js {1|2}{at:1}
= 2
= 'ab'
```
```

--------------------------------

### Dynamic Slide Navigation Example

Source: https://sli.dev/guide/global-context

Demonstrates common navigation actions using the `$nav` object, such as moving to the next step, next slide, or a specific slide number, and accessing current slide properties.

```javascript
$nav.next() // go next step
$nav.nextSlide() // go next slide (skip clicks)
$nav.go(10) // go slide #10

$nav.currentPage // current slide number
$nav.currentLayout // current layout name
```

--------------------------------

### v-switch Directive Example

Source: https://sli.dev/guide/animations

Illustrates the use of the v-switch directive to manage content visibility based on click counts, providing a structured way to define show and hide states.

```html
<v-switch>
  <template #1> show at click 1, hide at click 2. </template>
  <template #2> show at click 2, hide at click 5. </template>
  <template #5-7> show at click 5, hide at click 7. </template>
</v-switch>
```

--------------------------------

### Install Slidev Theme via npm

Source: https://sli.dev/guide/theme-addon

Provides the command to manually install a Slidev theme using npm. This is an alternative to automatic installation prompted by the Slidev server.

```bash
$ npm install @slidev/theme-seriph
```

--------------------------------

### Install Slidev Skill for AI Coding Agents

Source: https://sli.dev/guide/work-with-ai

Installs the official Slidev skill for AI coding agents, enabling them to understand Slidev's syntax and features. This command-line instruction requires Node.js and npm/npx to be installed.

```bash
npx skills add slidevjs/slidev
```

--------------------------------

### Specify Forward and Backward Transitions (Markdown)

Source: https://sli.dev/guide/animations

This example configures distinct transitions for forward and backward slide navigation in Slidev. 'go-forward' is used when moving to the next slide, and 'go-backward' is used when returning to the previous slide.

```markdown
---
transition: go-forward | go-backward
---

```

--------------------------------

### Accessing Theme Configurations

Source: https://sli.dev/guide/global-context

Shows how to access theme-specific configurations, like primary color, defined in the frontmatter using `$slidev.themeConfigs`.

```markdown
{{ $slidev.themeConfigs.primary }} // '#213435'
```

--------------------------------

### Importing Type Definitions

Source: https://sli.dev/guide/global-context

Provides an example of importing TypeScript type definitions, such as `TocItem`, from the `@slidev/types` package for use in script setup blocks.

```vue
<script setup>
import type { TocItem } from '@slidev/types'

function tocFunc(tree: TocItem[]): TocItem[] {
  // ...
}
</script>
```

--------------------------------

### Code Highlighting with Shiki

Source: https://sli.dev/guide/syntax

Demonstrates how to use Markdown code blocks for syntax highlighting in Slidev. Slidev integrates Shiki for robust code highlighting across various languages.

```markdown
```ts
console.log('Hello, World!')
```
```

--------------------------------

### Configure Addons in Slidev

Source: https://sli.dev/guide/theme-addon

Shows how to include multiple addons in your Slidev project by listing them under the 'addons' option in the headmatter. Addons extend the functionality of your slides.

```markdown
---
addons:
  - excalidraw
  - '@slidev/plugin-notes'
---

```

--------------------------------

### v-click Directive Examples

Source: https://sli.dev/guide/animations

Demonstrates various uses of the v-click directive to control element visibility based on click counts, including absolute and relative positioning, and synchronization between elements.

```html
<div v-click> visible after 1 click </div>
<div v-click="3"> visible after 3 clicks </div>
<div v-click> visible after 2 click </div>
<div v-click="'-1'"> visible after 1 click </div>
<div v-click="4"> visible after 4 clicks </div>
```

```html
<div v-click.hide="[2, 4]">
  This will be hidden at click 2 and 3 (and shown otherwise).
</div>
<div v-click />
<div v-click="['+1', '+1']">
  This will be shown only at click 2 (and hidden otherwise).
</div>
```

--------------------------------

### Use View Transitions API (Markdown)

Source: https://sli.dev/guide/animations

This example demonstrates enabling the View Transitions API for slide transitions in Slidev. It uses the 'view-transition' option and MDC syntax to apply the 'view-transition-title' class to elements, facilitating animated transitions between DOM states.

```markdown
---
transition: view-transition
mdc: true
---

# View Transition {.inline-block.view-transition-title}

---

# View Transition {.inline-block.view-transition-title}

```

--------------------------------

### Accessing Slide Project Title

Source: https://sli.dev/guide/global-context

Demonstrates how to access the project's title, defined in the frontmatter, using `$slidev.configs.title` within any slide.

```markdown
---
title: My First Slidev!
---

# Page 1

---

# Any Page

{{ $slidev.configs.title }} // 'My First Slidev!'
```

--------------------------------

### Conditional Rendering Based on Clicks

Source: https://sli.dev/guide/global-context

Provides an example of using the `$clicks` global context variable in HTML to conditionally render content based on the number of clicks within the current slide.

```html
<div v-if="$clicks > 3">Content</div>
```

--------------------------------

### Install Noto Emoji Font for Emoji Support

Source: https://sli.dev/guide/exporting

This command sequence installs the Noto Emoji font, which is necessary for correctly rendering emojis in exported PDFs and PNGs, especially in environments like CI/CD where fonts might be missing. It downloads the font, moves it to the system's font directory, and updates the font cache.

```bash
$ curl -L --output NotoColorEmoji.ttf https://github.com/googlefonts/noto-emoji/raw/main/fonts/NotoColorEmoji.ttf
$ sudo mv NotoColorEmoji.ttf /usr/local/share/fonts/
$ fc-cache -fv
```

--------------------------------

### Configure Theme in Slidev

Source: https://sli.dev/guide/theme-addon

Demonstrates how to set a theme for your Slidev project by specifying the 'theme' option in the headmatter. This allows for easy customization of the presentation's appearance.

```markdown
---
theme: seriph
---

# The first slide
```

--------------------------------

### Configure Base Path for Slidev Build

Source: https://sli.dev/guide/hosting

Specifies a base path for deploying slides under sub-routes. The `--base` option must start and end with a forward slash. This is crucial for correct routing when your SPA is hosted in a subdirectory.

```bash
slidev build --base /talks/my-cool-talk/
```

--------------------------------

### CSS Grid Layouts - Slidev

Source: https://sli.dev/guide/faq

Provides examples of using CSS Grid for creating layouts in Slidev. It includes a basic two-column layout and a more complex example with defined column widths, showcasing how to structure content within slides using grid properties.

```html
<div class="grid grid-cols-2 gap-4">
  <div>
    The first column
  </div>
  <div>
    The second column
  </div>
</div>
```

```html
<div class="grid grid-cols-[200px_1fr_10%] gap-4">
  <div>
    The first column (200px)
  </div>
  <div>
    The second column (auto fit)
  </div>
  <div>
    The third column (10% width to parent container)
  </div>
</div>
```

--------------------------------

### Install Playwright for CLI Export

Source: https://sli.dev/guide/exporting

To enable PDF, PPTX, or PNG exports via the CLI, you need to install `playwright-chromium`. This dependency is crucial for Playwright to render your slides.

```bash
$ pnpm add -D playwright-chromium
```

```bash
$ npm i -D playwright-chromium
```

```bash
$ yarn add -D playwright-chromium
```

```bash
$ bun add -D playwright-chromium
```

```bash
$ deno add -D npm:playwright-chromium
```

--------------------------------

### Build and Run Custom Docker Image for Slidev

Source: https://sli.dev/guide/hosting

This Dockerfile defines how to build a custom Docker image for Slidev presentations. It starts from a base Slidev image and copies the presentation files into the container. Subsequent commands show how to build and run this custom image.

```dockerfile
FROM tangramor/slidev:latest

ADD . /slidev
```

```bash
docker build -t myslides .

docker run --name myslides --rm --user node -p 3030:3030 myslides
```

--------------------------------

### Frontmatter Configuration in Markdown

Source: https://sli.dev/guide/syntax

Illustrates the use of YAML frontmatter at the beginning of Slidev Markdown files for configuring slides and the entire presentation. Supports headmatter for global settings and individual slide frontmatters.

```markdown
---
theme: seriph
title: Welcome to Slidev
---

# Slide 1

The frontmatter of this slide is also the headmatter

---
layout: center
background: /background-1.png
class: text-white
---

# Slide 2

A page with the layout `center` and a background image

---

# Slide 3

A page without frontmatter

---
src: ./pages/4.md  # This slide only contains a frontmatter
---

---

# Slide 5
```

--------------------------------

### Displaying Current Page Number

Source: https://sli.dev/guide/global-context

Shows how to display the current page number using the `$page` global context variable and compare it with the navigation's current page.

```markdown
Page: {{ $page }}

Is current page active: {{ $page === $nav.currentPage }}
```

--------------------------------

### GitHub Actions Workflow for Deploying Slidev to GitHub Pages

Source: https://sli.dev/guide/hosting

A GitHub Actions workflow file (`deploy.yml`) to automate the deployment of Slidev presentations to GitHub Pages. It checks out the code, sets up Node.js, installs dependencies, builds the presentation, and deploys the 'dist' folder.

```yaml
name: Deploy pages

on:
  workflow_dispatch:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'

      - name: Setup @antfu/ni
        run: npm i -g @antfu/ni

      - name: Install dependencies
        run: nci

      - name: Build
        run: nr build --base /${{github.event.repository.name}}/ 

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

```

--------------------------------

### Presenter Notes in Markdown

Source: https://sli.dev/guide/syntax

Shows how to include presenter notes within Slidev Markdown files. Notes are defined in comment blocks at the end of a slide and are not displayed to the audience.

```markdown
---
layout: cover
---

# Slide 1

This is the cover page.

<!-- This is a **note** -->

---

# Slide 2

<!-- This is NOT a note because it is not at the end of the slide -->

The second page

<!--
This is _another_ note
-->
```

--------------------------------

### Enable Slide Transitions (Markdown)

Source: https://sli.dev/guide/animations

This snippet shows how to enable the 'slide-left' transition for all slides by setting the 'transition' frontmatter option in Markdown. This provides a sliding effect when switching between slides.

```markdown
---
transition: slide-left
---

```

--------------------------------

### Slide Separators in Markdown

Source: https://sli.dev/guide/syntax

Demonstrates how to separate individual slides within a Slidev Markdown file using '---' on a new line. This is a fundamental structural element for presentations.

```markdown
# Title

Hello, **Slidev**!

---

# Slide 2

Use code blocks for highlighting:

```ts
console.log('Hello, World!')
```

---

# Slide 3

Use UnoCSS classes and Vue components to style and enrich your slides:

<div class="p-3">
  <Tweet id="..." />
</div>
```

--------------------------------

### Access Global Context Directly in Markdown

Source: https://sli.dev/guide/global-context

Demonstrates how to directly access global context variables like `$nav.currentPage` within Slidev markdown files for displaying dynamic information.

```markdown
# Page 1

Current page is: {{ $nav.currentPage }}
```

--------------------------------

### Apply Slidev Layout via Frontmatter (Markdown)

Source: https://sli.dev/guide/layout

Demonstrates how to specify a layout for a Slidev slide using Markdown frontmatter. This is the primary method for applying predefined or custom layouts to individual slides.

```markdown
---
layout: quote
---

A quote from someone
```

--------------------------------

### Conditional Rendering Based on Render Context

Source: https://sli.dev/guide/global-context

Illustrates using the `$renderContext` variable to conditionally render content based on whether the current view is a main slide, presenter view, or other contexts.

```markdown
<div v-if="['slide', 'presenter'].includes($renderContext)">
  This content will only be rendered in main slides view
</div>
```

--------------------------------

### Programmatic Global Context Access with Composables

Source: https://sli.dev/guide/global-context

Illustrates importing and using Slidev composables like `useNav`, `useDarkMode`, and `useSlideContext` in Vue components for type-safe access to global context and lifecycle hooks.

```vue
<script setup>
import { onSlideEnter, onSlideLeave, useDarkMode, useIsSlideActive, useNav, useSlideContext } from '@slidev/client'

const { $slidev } = useSlideContext()
const { currentPage, currentLayout, currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
const isActive = useIsSlideActive()
onSlideEnter(() => { /* ... */ })
onSlideLeave(() => { /* ... */ })
// ...
</script>
```

--------------------------------

### Custom Total Clicks Count (YAML)

Source: https://sli.dev/guide/animations

Configures the total number of clicks required before advancing to the next slide using the `clicks` frontmatter option in YAML.

```yaml
---
# 10 clicks in this slide, before going to the next slide
clicks: 10
---

```

--------------------------------

### CSS Flexbox Layouts - Slidev

Source: https://sli.dev/guide/faq

Illustrates how to use CSS Flexbox for responsive layouts in Slidev. Examples cover horizontal alignment of items and vertical arrangement with centered content, demonstrating flexible ways to position elements.

```html
<div class="flex items-center">
  <div>
    First block
  </div>
  <div>
    Second block
  </div>
</div>
```

```html
<div class="flex flex-col items-center">
  <div>
    Centered content
  </div>
</div>
```

--------------------------------

### Define Custom Slide Transitions (Markdown)

Source: https://sli.dev/guide/animations

This Markdown snippet shows how to apply a custom transition named 'my-transition' to slides in Slidev. This requires corresponding CSS definitions for the transition to take effect.

```markdown
---
transition: my-transition
---

```

--------------------------------

### Absolute Positioning with UnoCSS - Slidev

Source: https://sli.dev/guide/faq

Shows how to position elements absolutely within Slidev slides using UnoCSS utility classes. This example demonstrates aligning an element to the bottom-left corner of its container.

```html
<div class="absolute left-30px bottom-30px">
  This is a left-bottom aligned footer
</div>
```

--------------------------------

### Slidev Element Transition Classes (HTML/CSS)

Source: https://sli.dev/guide/animations

Demonstrates the HTML structure and CSS styles applied by the v-click directive, including `slidev-vclick-target` and `slidev-vclick-hidden` classes for managing element visibility and transitions.

```html
<div class="slidev-vclick-target slidev-vclick-hidden">Text</div>
```

```html
<div class="slidev-vclick-target">Text</div>
```

```css
/* below shows the default style */

.slidev-vclick-target {
  transition: opacity 100ms ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}
```

```css
/* styles.css */

.slidev-vclick-target {
  transition: all 500ms ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
}
```

```scss
.slidev-page-7,
.slidev-layout.my-custom-layout {
  .slidev-vclick-target {
    transition: all 500ms ease;
  }

  .slidev-vclick-hidden {
    transform: scale(0);
  }
}
```

--------------------------------

### v-motion Directive Basic Usage (HTML)

Source: https://sli.dev/guide/animations

Applies motion effects to an HTML element using the v-motion directive from VueUse Motion, defining initial, enter, and leave states.

```html
<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }"
  :leave="{ x: 80 }"
>
  Slidev
</div>
```

--------------------------------

### Use Global Context in Vue Components

Source: https://sli.dev/guide/global-context

Shows how to access Slidev's global context, such as `$slidev.configs.title` and navigation controls like `$nav.next`, within Vue components for interactive elements.

```vue
<template>
  <div>Title: {{ $slidev.configs.title }}</div>
  <button @click="$nav.next">
    Next Click
  </button>
  <button @click="$nav.nextSlide">
    Next Slide
  </button>
</template>
```

--------------------------------

### Relative Positioning with v-click in Slidev

Source: https://sli.dev/guide/animations

Illustrates how to control the animation sequence using the 'at' prop with relative positioning (e.g., '+1', '-1'). This allows elements to be revealed based on the click count relative to other animated elements, offering fine-grained control over the animation flow.

```markdown
<div v-click> visible after 1 click </div>
<v-click at="+2"><div> visible after 3 clicks </div></v-click>
<div v-click.hide="'-1'"> hidden after 2 clicks </div>

```js {none|1|2}{at:'+5'}
1  // highlighted after 7 clicks
2  // highlighted after 8 clicks
```
```

--------------------------------

### Absolute Positioning with v-click in Slidev

Source: https://sli.dev/guide/animations

Demonstrates absolute positioning for animations using the 'at' prop with specific click counts (e.g., '3', '1'). This method precisely defines which click will trigger an element's appearance or disappearance, providing exact control over the animation timing.

```markdown
<div v-click="3"> visible after 3 clicks </div>
<v-click at="2"><div> visible after 2 clicks </div></v-click>
<div v-click.hide="1"> hidden after 1 click </div>

```js {none|1|2}{at:3}
1  // highlighted after 3 clicks
2  // highlighted after 4 clicks
```
```

--------------------------------

### v-click and v-after Directives for Slidev Animations

Source: https://sli.dev/guide/animations

Demonstrates the usage of v-click and v-after directives to control element visibility on slide clicks. v-click makes elements visible on a specific click, while v-after makes them visible when the previous v-click is triggered. These directives are fundamental for creating step-by-step reveals in Slidev presentations.

```markdown
<v-click> Hello World! </v-click>

<div v-click class="text-xl"> Hey! </div>

<div v-click> Hello </div>
<div v-after> World </div>
```

--------------------------------

### Run Prebuilt Docker Image for Slidev

Source: https://sli.dev/guide/hosting

This command runs a prebuilt Slidev Docker image. It mounts the current directory to the container, maps port 3030, and sets an environment variable for npm mirror. If the directory is empty, it generates a template presentation.

```bash
docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest
```

--------------------------------

### Build Multiple Slidev Presentations

Source: https://sli.dev/guide/hosting

Enables building multiple slide decks simultaneously by providing multiple markdown files or using glob patterns. Each input file will generate a separate build in the output directory.

```bash
slidev build slides1.md slides2.md
```

```bash
slidev build *.md
```

--------------------------------

### Importing Static Assets in Markdown - Slidev

Source: https://sli.dev/guide/faq

Demonstrates how to import static assets like images in Slidev markdown files. It shows the correct way to use relative paths for direct imports and the recommended approach of using the public folder with absolute paths for assets in frontmatter or components to avoid build issues.

```markdown
![alt](./image.png)
<img src="./image.png" />
```

```markdown
---
background: /image.png
---

<Comp src="/image.png" />
```

--------------------------------

### Netlify Configuration for Slidev

Source: https://sli.dev/guide/hosting

Configuration file (`netlify.toml`) for Netlify to build and deploy a Slidev presentation. It specifies the publish directory, build command, Node.js version, and sets up redirects for the SPA.

```toml
[build]
publish = 'dist'
command = 'npm run build'

[build.environment]
NODE_VERSION = '20'

[[redirects]]
from = '/*'
to = '/index.html'
status = 200

```

--------------------------------

### v-motion with Click Triggers (HTML)

Source: https://sli.dev/guide/animations

Utilizes the v-motion directive to trigger animations based on specific click counts, including `click-x`, `click-x-y`, and combined `v-click` and `v-motion`.

```html
<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0, y: 0 }"
  :click-1="{ x: 0, y: 30 }"
  :click-2="{ y: 60 }"
  :click-2-4="{ x: 40 }"
  :leave="{ y: 0, x: 80 }"
>
  Slidev
</div>
```

```html
<div v-click="[2, 4]" v-motion
  :initial="{ x: -50 }"
  :enter="{ x: 0 }"
  :leave="{ x: 50 }"
>
  Shown at click 2 and hidden at click 4.
</div>
```

--------------------------------

### Build Slidev Presentation to SPA

Source: https://sli.dev/guide/hosting

Builds the Slidev presentation into a static Single-Page Application (SPA). The generated files are typically placed in the 'dist' folder. This command is essential for deploying your slides as a standalone web application.

```bash
slidev build
```

--------------------------------

### Scaffold New Slidev Theme with Package Managers

Source: https://sli.dev/guide/write-theme

Use these commands to generate a new Slidev theme project using different package managers like pnpm, npm, yarn, bun, or deno. This command initializes the basic structure for your theme.

```bash
$ pnpm create slidev-theme
```

```bash
$ npm init slidev-theme@latest
```

```bash
$ yarn create slidev-theme
```

```bash
$ bun create slidev-theme
```

```bash
$ deno init --npm slidev-theme
```

--------------------------------

### Preview Local Theme in a Demo Slides Deck

Source: https://sli.dev/guide/write-theme

Create a `slides.md` file with specific frontmatter to preview your theme locally. The `theme: ./` setting tells Slidev to use the theme located in the current directory.

```markdown
---
theme: ./  
---

```

--------------------------------

### Specify Output Directory for Slidev Build

Source: https://sli.dev/guide/hosting

Allows customization of the output directory for the built SPA. Instead of the default 'dist' folder, you can specify any folder name using the `--out` option.

```bash
slidev build --out my-build-folder
```

--------------------------------

### Creating Custom Vue Components for Slidev

Source: https://sli.dev/guide/component

Illustrates the directory structure for adding custom Vue components to a Slidev project. Components placed in the `components` directory are automatically recognized.

```bash
your-slidev/
  ├── ...
  ├── slides.md
  └── components/
      ├── ...
      └── MyComponent.vue
```

--------------------------------

### Specify Output Filename via CLI

Source: https://sli.dev/guide/exporting

Control the output filename for your exported files by using the `--output` option with the `slidev export` command. For example, `slidev export --output my-pdf-export`.

```bash
$ slidev export --output my-pdf-export
```

--------------------------------

### Advanced Transition Configuration (Markdown)

Source: https://sli.dev/guide/animations

This advanced configuration in Slidev allows passing specific options to the Vue TransitionGroup component. It sets a custom transition name ('my-transition') and defines custom CSS classes for the enter and active states.

```markdown
---
transition:
  name: my-transition
  enterFromClass: custom-enter-from
  enterActiveClass: custom-enter-active
---

```

--------------------------------

### Export Slides with Click Animations via CLI

Source: https://sli.dev/guide/exporting

To include click animations and export multiple steps of a slide as separate pages, use the `--with-clicks` option with the `slidev export` command.

```bash
$ slidev export --with-clicks
```

--------------------------------

### Build Slidev Presentation Without Speaker Notes

Source: https://sli.dev/guide/hosting

Builds the Slidev presentation excluding speaker notes. This is useful for public sharing where notes are not intended to be visible to the audience.

```bash
slidev build --without-notes
```

--------------------------------

### Hiding Elements with v-click and v-after in Slidev

Source: https://sli.dev/guide/animations

Explains how to hide elements after a certain number of clicks using the .hide modifier with v-click and v-after directives, or the 'hide' prop with v-click and v-after components. This is useful for managing complex reveals and ensuring elements disappear as intended.

```markdown
<div v-click> Visible after 1 click </div>
<div v-click.hide> Hidden after 2 clicks </div>
<div v-after.hide> Hidden after 2 clicks </div>

<v-click> Visible after 1 click </v-click>
<v-click hide> Hidden after 2 clicks </v-click>
<v-after hide> Also hidden after 2 clicks </v-after>
```

--------------------------------

### Vercel Configuration for Slidev

Source: https://sli.dev/guide/hosting

Configuration file (`vercel.json`) for Vercel to host a Slidev presentation. It sets up rewrites to ensure that all routes are handled by `index.html`, which is standard for SPAs.

```json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

```

--------------------------------

### Define Custom Slide Transitions (CSS)

Source: https://sli.dev/guide/animations

This snippet defines custom CSS for a Slidev transition named 'my-transition'. It uses Vue Transition's enter/leave active and from/to classes to control the transition's opacity over 0.5 seconds, allowing for custom visual effects.

```css
.my-transition-enter-active,
.my-transition-leave-active {
  transition: opacity 0.5s ease;
}

.my-transition-enter-from,
.my-transition-leave-to {
  opacity: 0;
}

```

--------------------------------

### Directory Structure for Custom Layouts (Bash)

Source: https://sli.dev/guide/write-layout

This bash snippet illustrates the expected directory structure for adding custom layouts to a Slidev project. New layout files should be placed within the `layouts` directory, alongside other project assets.

```bash
your-slidev/
  ├── ...
  ├── slides.md
  └── layouts/
      ├── ...
      └── MyLayout.vue
```

--------------------------------

### v-clicks Component for List and Table Animations in Slidev

Source: https://sli.dev/guide/animations

Showcases the v-clicks component, a shorthand for applying v-click to multiple child elements. It's ideal for animating lists and table rows sequentially. The 'depth' prop handles nested lists, and the 'every' prop controls how many items appear per click.

```markdown
<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>

<v-clicks depth="2">

- Item 1
  - Item 1.1
  - Item 1.2
- Item 2
  - Item 2.1
  - Item 2.2

</v-clicks>

<v-clicks every="2">

- Item 1.1
- Item 1.2
- Item 2.1
- Item 2.2

</v-clicks>
```

--------------------------------

### Export Multiple Markdown Files via CLI

Source: https://sli.dev/guide/exporting

You can export multiple Markdown presentation files at once. Each input file will generate its own corresponding output file.

```bash
$ slidev export slides1.md slides2.md
```

```bash
$ slidev export *.md
```

--------------------------------

### Using Vue Components in Markdown

Source: https://sli.dev/guide/component

Demonstrates how to use Vue components directly within Markdown slides in Slidev. This leverages unplugin-vue-components for automatic import resolution.

```markdown
# My Slide

<MyComponent :count="4"/>
```

--------------------------------

### Specify Minimal Slidev Version Requirement

Source: https://sli.dev/guide/write-theme

Ensure your theme works correctly by specifying the minimum required Slidev version in the `engines` field of your `package.json`. This prevents users with incompatible versions from using your theme.

```json
{
  "engines": {
    "slidev": ">=0.48.0"
  }
}
```

--------------------------------

### Configure Default Slidev Theme Settings

Source: https://sli.dev/guide/write-theme

Define default configurations for your Slidev theme by adding a `slidev.defaults` field in your `package.json`. These settings, such as `transition` and `aspectRatio`, will be merged with the user's configurations.

```json
{
  "slidev": {
    "defaults": {
      "transition": "slide-left",
      "aspectRatio": "4/3"
    }
  }
}
```

--------------------------------

### Control Export Timing with --wait and --wait-until

Source: https://sli.dev/guide/exporting

The `--wait` option adds a delay in milliseconds before exporting, useful for rendering complex slides. The `--wait-until` option allows specifying conditions like 'networkidle', 'domcontentloaded', 'load', or 'none' to determine when a slide is ready for export. Using values other than 'networkidle' requires careful verification of slide completeness.

```bash
$ slidev export --wait 10000
```

```bash
$ slidev export --wait-until none
```

```bash
$ slidev export --wait 1000
```

--------------------------------

### Export Slides to PPTX via CLI

Source: https://sli.dev/guide/exporting

Generate a PPTX file from your Slidev presentation using the `slidev export --format pptx` command. Note that slides are exported as images, and presenter notes are included.

```bash
$ slidev export --format pptx
```

--------------------------------

### Export Slides to Markdown via CLI

Source: https://sli.dev/guide/exporting

Compile your slides into a Markdown file composed of compiled PNG images using the `slidev export --format md` command. This can be useful for documentation or embedding.

```bash
$ slidev export --format md
```