Writing Layouts

Please read

📘 Layouts

first.

To create a custom layout, simply create a new Vue file in the layouts directory:

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

Layouts are Vue components, so you can use all the features of Vue in them.

In the layout component, use <slot/> (the default slot) for the slide content:

<!-- default.vue -->
<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>

You can also have named slots for more complex layouts:

<!-- split.vue -->
<template>
  <div class="slidev-layout split">
    <div class="left">
      <slot name="left" />
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

And then use it with

✨ Slot Sugar for Layouts

.