sveltesveltekitsvelte-componentsvelte-store

Provide data to main Layout from any route in SvelteKit

I have to following folder structure and I'm struggling to find the best way to provide my main layout with some props.

src/
└── routes/
    └── (app)/
        ├── route1/
        │   └── +page.svelte
        ├── route2/
        │   └── +page.svelte
        └── +layout.svelte

To have more context, the main layout has a Sidebar menu component that needs a list of elements to render based on the selected route. So I need to find a way to communicate and change the props of one component in the main layout from any route.

I tried using slots and send the complete Sidebar as a slot for the main layout using a route layout but it didn't work. As far as I later understood, each layout can only have one main slot. I also tried to investigate if I can use a Global State somehow for this implementation but it feels way too complicated for what I'm trying to do.

Solution

  • If you only have to provide data and don't need to change anything while on the page you can also opt for using the load function.

    in /route1/+page.ts you would then have

    export async function load() {
 return {
   sidebar: [1,2,3]
 }
}

    and in the layout.svelte

    {#each $page.data.sidebar ?? [] as item}
  <p>{item}</p>
{/each}

    $page is a store that holds among other things all the data returned from the load functions, so it will automatically update when going from one page to another, you could also do this in a Sidebar.svelte component instead of the layout of course.