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
`
12 Replies
yea so you want a +layout.svelte page
then you can use it for <header> <main> <slot></main> <footer>
ok cool same as the portfolio then.. so what would you usually put in the routes/+page.svelte?
The home page 😄
it will be your
/
root url
domain.com/ah ok yeah thought so
thanks duuuuuude
np
Quick Q.. what the heck is <slot /> ? I can't find it anywhere on the page, is it some sort of special import?
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
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"
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 ;-
shweet, ty good sir
Pages/layouts are basically components
more or less xD
hence .svelte
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