noob question - how to pass slot/data to layout component?

[bastinald]

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

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...

[jonagoldman]

That does't seem right to me. You are not inserting the <layout> element in the page, and also why do you have both <slot /> and $slots?

Take a look at the Pages docs for examples on regular layouts and persistent layouts. And maybe the Vue docs on slots.

[ahmadaldabouqii]

The fast way I found to pass data to persistent layouts is by:

in the child

use this:
layout: (h, page) => { return h(Layout, () => page) }

instead of:

// Using the shorthand layout: Layout,

and in the parent layout, you can access your child with this.$slots.default()[0]