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?