Skip to content

Commit c920e2d

Browse files
committed
docs: cover slot fallbacks, loop vars, and script props in v5 conversion guide
1 parent 4516b0c commit c920e2d

1 file changed

Lines changed: 21 additions & 0 deletions

File tree

skills/maizzle/references/CONVERT-MAIZZLE-V5.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,13 @@ PostHTML expressions are gone. Use Vue's template syntax:
3232
| `<yield />` | `<slot />` |
3333
| `<block name="x">` (defines slot) | `<slot name="x" />` |
3434
| `<block name="x">` (fills slot) | `<template #x>...</template>` |
35+
| `<slot:x>fallback</slot:x>` (slot + default) | `<slot name="x">fallback</slot>` |
36+
| `loop.first` / `loop.index` (in `<each>`) | `v-for="(item, index) in items"``index === 0` / `index` |
3537

3638
ESP / mail-merge syntax (`{{ mailchimp_var }}`, `*|MERGE|*`, etc.) that you need preserved verbatim: wrap in `<Raw>` or use `v-pre` on the parent.
3739

40+
An `<each>` body that emits sibling elements per iteration (e.g. a separator `<tr>` then a content `<tr>`) needs `<template v-for>` — v-for on one element can't wrap multiple roots.
41+
3842
## Components
3943

4044
PostHTML components → Vue components. Definition: wrap body in `<template>`, replace `<yield />` with `<slot />`. Usage: `<x-card>``<Card>`. `<component src="...">` / `<module href="...">` → auto-imported PascalCased tag; `locals="..."``v-bind="..."`.
@@ -48,6 +52,23 @@ Sizing/styling moved from props to Tailwind classes:
4852

4953
For Outlook fine-tuning of spacer height: `mso-line-height-alt-*` utility.
5054

55+
`<script props>` (posthtml-component locals) → `<script setup>` + `defineProps`. Kebab prop names become camelCase; array/object defaults need a factory function:
56+
57+
```diff
58+
- <script props>
59+
- module.exports = {
60+
- containerClasses: props['container-class'] || '',
61+
- items: props.items || [{ name: 'A' }],
62+
- }
63+
- </script>
64+
+ <script setup>
65+
+ defineProps({
66+
+ containerClass: { type: String, default: '' },
67+
+ items: { type: Array, default: () => ([{ name: 'A' }]) },
68+
+ })
69+
+ </script>
70+
```
71+
5172
## `.vue` Templates: No Frontmatter
5273

5374
`.vue` templates have **no frontmatter**. Move it into `<script setup>` via `defineConfig()`:

0 commit comments

Comments
 (0)