I have a load function in my root +layout.js file that is:
export async function load() {
// and all it returns is
return {
prop1: true,
prop2: false,
prop3: "value 3"
};
For the life of me, I cannot do anything in the +layout.svelte file to make these values show up.
export let prop1;
export let prop2;
export let prop3;
console.log("prop1 = " + prop1);
gives me "prop1 undefined" in the console every time!
I have tried deconstructing the export like
let { prop1 } = data;
// and
let { prop1 } = props;
and nothing works... no matter what I do!
Is it because the load function is async? I need it to be async so I can fetch some external api's when it's done, but I was just testing the bare bones to try and understand how things worked.
Any ideas on the load order of
+page.js vs +layout.js
+page.svelte vs +layout.svelte
etc?
Top comments (2)
I am a moron!!
I never defined data!!
export let data;
export let { prop1, prop2, prop3 } = data;
I was assuming
export let { prop1, prop2, prop3 } = data;
also defined and exported data!!!
Carry on with your lives...
Hello!
FYI, you don't need to define data.
You can find it by importing {page} from '$app/stores'.
Then you can use your props as {$page.data.prop1} or {$page.data.prop2}...