Sveltekit file organizing - Where to write what?

My app will consist of just 3 pages; Main/Home, Cart, and Payment. I vaguely remember doing this on my portfolio and looking back at the code can see I had routes/folder/+page.svelte for each separate page, but for the initial home page I seem to be using routes/+page.svelte for my homepage, routes/Header.svelte for my navbar, and +layout.svelte for.. well I'm not really sure anymore LOL... Github is here though so you can make sense of it: https://github.com/callum-laing/sv-portfolio/tree/main/src/routes The image is my current "start" for this, though I haven't added +layout.svelte yet.. Currently I have routes/global.css routes/+page.svelte routes/cart/+page.svelte routes/payment/+page.svelte I want the navbar and the footer to be shown on every page, and the only thing that changes being the inbetween content
<header>"Always show"</header>
<main>"Change based on what page you're on" </main>
<footer>"Always change"</footer>
<header>"Always show"</header>
<main>"Change based on what page you're on" </main>
<footer>"Always change"</footer>
`
No description
12 Replies
b1mind
b1mind•9mo ago
yea so you want a +layout.svelte page then you can use it for <header> <main> <slot></main> <footer>
CDL
CDL•9mo ago
ok cool same as the portfolio then.. so what would you usually put in the routes/+page.svelte?
b1mind
b1mind•9mo ago
The home page 😄 it will be your / root url domain.com/
CDL
CDL•9mo ago
ah ok yeah thought so thanks duuuuuude
b1mind
b1mind•9mo ago
np
CDL
CDL•9mo ago
Quick Q.. what the heck is <slot /> ? I can't find it anywhere on the page, is it some sort of special import?
b1mind
b1mind•9mo ago
https://svelte.dev/docs/special-elements Vue and Svelte has this concept of slots. (which templates in Svelte5 will probably be better) https://learn.svelte.dev/tutorial/slots
CDL
CDL•9mo ago
thanks again, im using my portfolio as a guide, and i noticed slot and couldnt find it so was like "ehhh this has to be something special right"
b1mind
b1mind•9mo ago
Yes you have to have a <slot/> in layout or it wont work It will even give you warmings or should if you have things installed right ;-
CDL
CDL•9mo ago
shweet, ty good sir
b1mind
b1mind•9mo ago
Pages/layouts are basically components more or less xD hence .svelte
CDL
CDL•9mo ago
yeah the rest makes sense it was just the slots that had me guessing ah yeah I was wondering why my h1 in +page.svelte wasn't appearing, I add <slot /< to +layout.svelte and it appears. Alright all makes sense, back to work
Want results from more Discord servers?
Add your server