Kevin Powell - Community•4mo ago

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>

12 Replies

b1mind•4mo ago

yea so you want a +layout.svelte page then you can use it for <header> <main> <slot></main> <footer>

CDL•4mo ago

ok cool same as the portfolio then.. so what would you usually put in the routes/+page.svelte?

b1mind•4mo ago

The home page 😄 it will be your / root url domain.com/

CDL•4mo ago

ah ok yeah thought so thanks duuuuuude

b1mind•4mo ago

CDL•4mo 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•4mo 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•4mo 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•4mo 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•4mo ago

shweet, ty good sir

b1mind•4mo ago

Pages/layouts are basically components more or less xD hence .svelte

CDL•4mo 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

Gaming

Programming

Sveltekit file organizing - Where to write what?