how to pass slot/data to inertia layout component

Question

How do I pass a slot or a prop to a layout component in inertia?

For example, heres a ForgotPassword component:

<template>
    <slot name="title">Forgot Password</slot>

    Forgot pw stuff goes here...
</template>

<script>
import CardLayout from "@/Layouts/CardLayout";

export default {
    layout: CardLayout,
}

Here is the CardLayout component:

<template>
    <h1>{{ $slots.title }}</h1>

    <slot/>
</template>

Nothing shows up inside the h1 tag...

Answer 1

Adding this here as the solution above does not work. You can pass data to the Layout component by setting a prop value

layout: (h, page) => h(Layout, { somePropDataDefinedInLayout: value }, () => page)

Answer 2

// CardLayout
<template>
    <h1><slot name="title" /></h1>
    <slot />
</template>

// ForgotPassword
<template>
    <template #title>Forgot Password</template>

    Forgot pw stuff goes here...
</template>