| 1 | # Writing Layouts |
| 2 | |
| 3 | > Please read <LinkInline link="guide/layout" /> first. |
| 4 | |
| 5 | To create a custom layout, simply create a new Vue file in the `layouts` directory: |
| 6 | |
| 7 | ```bash |
| 8 | your-slidev/ |
| 9 | ├── ... |
| 10 | ├── slides.md |
| 11 | └── layouts/ |
| 12 | ├── ... |
| 13 | └── MyLayout.vue |
| 14 | ``` |
| 15 | |
| 16 | Layouts are Vue components, so you can use all the features of Vue in them. |
| 17 | |
| 18 | In the layout component, use `<slot/>` (the default slot) for the slide content: |
| 19 | |
| 20 | ```vue [default.vue] |
| 21 | <template> |
| 22 | <div class="slidev-layout default"> |
| 23 | <slot /> |
| 24 | </div> |
| 25 | </template> |
| 26 | ``` |
| 27 | |
| 28 | You can also have [named slots](https://vuejs.org/guide/components/slots.html) for more complex layouts: |
| 29 | |
| 30 | ```vue [split.vue] |
| 31 | <template> |
| 32 | <div class="slidev-layout split"> |
| 33 | <div class="left"> |
| 34 | <slot name="left" /> |
| 35 | </div> |
| 36 | <div class="right"> |
| 37 | <slot name="right" /> |
| 38 | </div> |
| 39 | </div> |
| 40 | </template> |
| 41 | ``` |
| 42 | |
| 43 | And then use it with <LinkInline link="features/slot-sugar" />. |
| 44 |