Sveltejs Academy · Lesson

Returning Data and Using $page.data

Return data from load and access it in the page component via the data prop.

The data Prop

The page receives a special data prop populated from the load function return.

<!-- +page.svelte -->
<script>
  export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>

With TypeScript, SvelteKit generates types from load to data automatically.

<script lang="ts">
  import type { PageData } from "./$types";
  export let data: PageData;
</script>