How to use SvelteKit Layouts Tutorial

SvelteKit is the framework all of us frontend engineers are waiting for! Why not start to learn as much as we can with the early development version of SvelteKit. For all we know, SvelteKit could be released any day!

Most frameworks today that are used for building websites and apps allow you to wrap your content in a layout or template that contains elements such as the header and footer. SvelteKit allows you to use layouts in a simple and intuitive manner. This videos will teach you how to make use of SvelteKit layouts as they are implemented in the current development version of SvelteKit.

If you enjoy my content you can find me on Twitter @BraydenGirard and make sure you are subscribed on YouTube so you don't miss out on upcoming content!

[NomadJoe]

I can't wait for a release of SvelteKit !! Thanks for the content.

[Roshambo]

Loving the SvelteKit content. Awesome of you to have all this content up ahead of the public beta release today. Subscribed :)

[sswm]

I've been using svelte kit for a week or two now, it's working great. I had to Google and search the discord and the source code a bit, to find where are the page store, navigation goto and such... I'm setting up an auth system talking to a Django REST backend, then I intend to implement a kanban board like Trello as a portfolio project, and for my own use.

[ApoorvMote]

The way you say "about" LOL. You are such a Canadian.

[quangle]

I like the explanation and benefits of using a layout. Thank you for the video tutorial.

[ministerstein]

Great. Many thanks! I'm looking forward to the stable release of svelte kit and want to move from react.

[everyhandletaken]

You should have way more views & subscribers!
Hopefully that changes for you.
Keep up the awesome work :)

[avibrarbrar]

The real question is how do you control nav menu within the routes ? For example if we go to about page how we can manipulate nav menu to have an underline for about link?

[babakfp]

So what is the difference between the Sapper layout system and the SvelteKit layout system? You need to write the layout file name "$layout" instead of "_layout". It's amazing bro.

[Tanstak]

Hello! I really like Svelte kit, but I can't find a solution for dynamic routes. If I create blog/[slug].svelte I will be available open url /blog/some-test-slug or /blog/another-slug, but how I can get that slug? export let slug doesn't working(((

[zakariachahboun]

Great 😊
Bro you don't have to use wsl just use Linux directly (look at pop os it's amazing)

[chrisdavis]

Great stuff, keep up the SvelteKit tutorials! Question—do you know how to pass data from a page to a component in the __layout.svelte? For example: I have a Language Switcher component that exports an array of languages. This component lives in the __layout file as I want it on every page. However, the languages prop needs to be populated on the current page/route as I'm getting it from an external API. Any ideas?

[manrikevillalobos]

Great video! Thank you! I can't wait for the official release of SvelteKit! Maybe is too early for this question at this point, because SvelteKit is under construction yet, but can you know if it's possible to have more than one $layout? That's because some pages, depending of its content, would have a different layout than the others. Once again, thank you so much for the video!

[SteveDavison]

Hi Brayden, great tutorial, I am finding this series inspiring. I have found it possible to create a sub-layout by creating a new $layout.svelte file in a sub-folder but the parent layout still wraps the overall view. Is there a way to turn off the parent layout? Or is the only way to create a separate layout in a different part of the routes hierarchy?

[valentineemmanuel]

so what if we want to choose when to show some part of the layout, I mean if I dont want all the pages to have the layout

[.michaelmaramag]

Actually svelte kit use vite.js now. And its totally different setup.. how to make it work.. i am new to svelte