How to pass data from child route to the parent layout?

[vhtmui]

I want to do things like this,

in layout file:

<!-- +layout.svelte --> <script> /** @type {import('./$types').LayoutData} */ let { title } = $props(); </script> <svelte:head> <title>{title}</title> </svelte:head>

Then i can set title in the child +layout.svelte or +page.svelte just with a variable.

And i don't kown how to implement yet.

[coryvirok]

I believe that the way to do this today is to either use a store and set it in the context from +layout.svelte with pages updating the store value or to create +page.ts files that return a title key in the page data and have +layout.svelte listen to $page.data for changes to the title key.

But the ask here is kind of similar to this discussion on passing data from pages to layouts.

[david-plugge]

For page metadata i usually go the route of defining a schema inside app.d.ts

interface PageMetadata { title: string; ... } declare global { namespace App { interface PageData { meta: PageMetadata } } } 

In every +page.{ts,js} file i provide the page metadata:

export const load = () => { return { meta: { title: 'This is the page title!' } } }

A component Seo.svelte which is placed inside the root layout takes care of rendering the metadata:

<script lang="ts">  import { page } from '$app/stores';   const {  title,  ...  } = $derived($page.data.meta); </script> <svelte:head> <title>{title}</title> ... <svelte:head>

[GulgDev]

Thanks! But how can you get this to work with localized titles?

[david-plugge]

That depends on your i18n setup. You could only provide the keys on some cases. Which tool are you using?