Layout load functions in Svelte - Mini Project: Build & Apply

Using Layout Load Functions in Svelte

📖 Scenario: You are building a simple Svelte app with a shared layout that fetches user data once and shares it with all pages.

🎯 Goal: Create a +layout.svelte and +layout.js file where the layout load function fetches user info and passes it to the layout component.

📋 What You'll Learn

Create a +layout.js file with a load function that returns a user object

Create a +layout.svelte file that receives the user data as a prop

Display the user's name inside the layout component

Use the layout load function to share data with all child pages

💡 Why This Matters

🌍 Real World

Layouts with load functions let you fetch data once and share it across many pages, like user info or site settings.

💼 Career

Understanding layout load functions is key for building efficient, data-driven Svelte apps used in modern web development jobs.

1

Create the layout load function file

Create a file named +layout.js and write a load function that returns an object with a user property set to { name: 'Alice' }.

Svelte

// Your code here

Hint

The load function must return an object with a user property.

2

Create the layout component to receive data

Create a file named +layout.svelte. Add a export let data; statement to receive the load function data.

Svelte

    // Your code here

Hint

Use export let data; inside the <script> tag to receive props.

3

Display the user name in the layout

Inside +layout.svelte, add markup to display the user's name using {data.user.name}.

Svelte

    export let data;

Hint

Use curly braces {} to insert JavaScript expressions in Svelte markup.

4

Add a slot for child pages in the layout

In +layout.svelte, add a <slot /> element below the header to render child page content.

Svelte

    export let data;



    Welcome, {data.user.name}!

Hint

The <slot /> tag is where child page content will appear inside the layout.