| 1 | --- |
| 2 | name: slot-sugar |
| 3 | description: Shorthand syntax for layout named slots in multi-column layouts |
| 4 | --- |
| 5 | |
| 6 | # Slot Sugar for Layouts |
| 7 | |
| 8 | Shorthand syntax for layout named slots. |
| 9 | |
| 10 | ## Standard Vue Slot Syntax |
| 11 | |
| 12 | ```md |
| 13 | --- |
| 14 | layout: two-cols |
| 15 | --- |
| 16 | |
| 17 | <template v-slot:default> |
| 18 | |
| 19 | # Left |
| 20 | |
| 21 | This shows on the left |
| 22 | |
| 23 | </template> |
| 24 | <template v-slot:right> |
| 25 | |
| 26 | # Right |
| 27 | |
| 28 | This shows on the right |
| 29 | |
| 30 | </template> |
| 31 | ``` |
| 32 | |
| 33 | ## Shorthand Syntax |
| 34 | |
| 35 | ```md |
| 36 | --- |
| 37 | layout: two-cols |
| 38 | --- |
| 39 | |
| 40 | # Left |
| 41 | |
| 42 | This shows on the left |
| 43 | |
| 44 | ::right:: |
| 45 | |
| 46 | # Right |
| 47 | |
| 48 | This shows on the right |
| 49 | ``` |
| 50 | |
| 51 | ## Explicit Default Slot |
| 52 | |
| 53 | ```md |
| 54 | --- |
| 55 | layout: two-cols |
| 56 | --- |
| 57 | |
| 58 | ::right:: |
| 59 | |
| 60 | # Right |
| 61 | |
| 62 | This shows on the right |
| 63 | |
| 64 | ::default:: |
| 65 | |
| 66 | # Left |
| 67 | |
| 68 | This shows on the left |
| 69 | ``` |
| 70 | |
| 71 | ## Common Layouts with Slots |
| 72 | |
| 73 | - `two-cols`: `default` (left) and `right` |
| 74 | - `two-cols-header`: `default`, `left`, `right` |
| 75 | - `image-left/right`: `default` for content |
| 76 |