SvelteKit Layouts Explained (Nested, Groups, Resets)

hey what's going on everyone my name is Hunter and welcome to a brand new spell kit video in this video we're going to be learning about layouts in spell kit and we're going to start off by looking at the basics of layouts and then we're going to move on to nested layouts and then two more advanced concepts like layout groupings so as always let's go ahead and take a look at the documentation to see what they have to say about layouts in scope kit so we can see here that upon navigation existing page dot Spell components will be destroy it and a new one will take its place but in many apps there are elements such as the navigation or Footers that should be visible on every single page so instead of having to repeat your navbar in every single page you can place it in a layout so then it describes how to create a layout so you probably know that a layout is named plus layout.spel and the default layout is focal uses if you don't bring your own looks like this so it just has the slot tags and they know here that you can add whatever markup and styles and behavior that you'd like inside of the layout the only requirement is that it contains a slot for the page content so you can see here in the example they have they have a nav bar and they add slot here and Slot is where your page content goes now let's go ahead and take a look at a few examples and to make things easier I went ahead and set up a skeleton project with Tailwind CSS and Daisy UI for quick styling but as you can see here all we have is a plus page.svelt for the home page and then an about page with an H1 tag in it if you go to our app here it's not running yet let me run that you can see that we just have home and we have about so one of the first things that we can do and like I said I already loaded Tailwind CSS to the application I've installed it and added all the proper configurations but I need to get this CSS passed to my application so one of the easiest ways to do that is using a layout and more importantly the root layout so I can come into routes and create a layout Dot svelp and then at the top inside of script tags I can import the app.css and you can see here that our about page has been cleared right and that's because we don't have a slot tag yet in our layout so we need to add that slot tag which is a requirement so we can add it like this and now you can see we actually have some of the default Tailwind Styles applied to our home page and our about page right so let's go ahead and take a look at probably one of the most common use cases for a layout and that's going to be you know navigation so since I'm using Daisy UI I'm going to make things easy here and just copy and paste in an app bar and this will some of these components will come in into more use here in a bit we get to a sidebar and things like that so I'm going to go ahead and grab this nav bar with menu and Sub menu I'm not going to use the sub menu but we'll just copy all of this over so inside of our layout we'll copy this and it's going to yell at me because I don't have hreps inside of my links so let's go ahead and do that okay so I went ahead and removed some of the things we weren't going to need as well as just fixed up some of the styling a bit inside of our nav bar and you can see that it's now displaying on the home page and if we go to the about page clicking this link here we can see that the layout still persists even on the about page and it doesn't really matter as to where the slot is placed like we can place the slot above the nav bar for example when it would become a footer or we could simply you know add a footer down here and just say let's just say put a P tag here and say copyright 2022 All Rights Reserved and you can see that this is also going to persist on every single page right essentially the basics of a layout layouts also have layout.js or layout.server.js which function the same way as a plus page dot server or plus page.js file and I can show you what that's going to do so we can do at layout.js and it also exports the load function and we can just Define something here let's just Define a user say name is Hunter email is and then let's return the user now the cool thing about layouts is that this is this prop this data prop is going to be accessible in every single page underneath this layout so inside of page.spel we can come here and we can put in some script tags and say export let data and then instead of just saying home we can also add a P tag that says welcome data Dot user.name that should say welcome Hunter you can see now this is passed here we also have access it access to it in the about page as well so we can just say data dot whoops let me actually add the script tags here we could say about how many go about it says about Hunter right so whatever is returned from the load function in the layout.js is accessible to every page that falls underneath of that layout or every page is covered by that layout right so for adding a load function to the root layout.js it's going to be accessible to every single page within our application right so now we've covered some of the basics of a layout let's go ahead and move on to nested layouts so if you read here in the documentation it says layouts can be nested suppose we don't have a single settings page but instead have nested Pages like settings profile and settings notifications with a shared submenu now we can create a layout that only applies to Pages below settings while inheriting the root layout at the with the top level nav and they have a real life example here where we can see github.com settings if I click on this you can see here that we have this top level navigation or this top level layout navigation I guess you could call it which persists on every page on GitHub but then if I go to my settings I now have this sidebar here that's available within my settings so if I see settings I can go to appearance you can see that we have settings appearance so this layout is only applied to you know slash settings slash X right so let's go ahead and look at how we can do that in our application and I'm actually going to create a couple different routes here and I'm going to use the svelt for vs code extension to easily generate some of these routes so inside of my routes folder I'm going to right click on it and click on spell kit files and then create a route and I'm going to name this settings and then I want to have a page.s felt as well as a page.js sure why not as well as a layout dot spell and then inside of settings I can actually right click this do the same thing again I'm going to create one called profile and this one's just going to have the pages felt in it and then I'm going to create one called appearance and I'll have a page that's fill in that one as well so our goal here is to implement a nested layout so that only on these settings pages are we going to have that sidebar right so we can go ahead and within settings on the page dot spell we'll just set up an H1 with text 3XL and font medium and we'll just call this settings and then we'll do the same thing on each of the other Pages here just so we can kind of get an idea we'll say profile settings and then appearance settings all right so I'm going to go to settings I have nothing here on this page let's see because I don't have I have a layout here that I have yet to add a slot tag to so let's go ahead and just do that now so you can see we have settings if I go to settings slash profile you'll see we have profile settings and then appearance should have appearance settings right cool so now let's come into days UI and let's grab a sidebar so I think it's called a drawer and if we look here we can see that there's a drawer for mobile and a fixed sidebar for desktop so we'll just take this here and paste it into our layout and if we just click save as it is right now you're going to see that we have the sidebar here but our content is down here and if you look days UI actually makes it really easy for you to tell you where to put the page content so let's go ahead and put our slot here right because this is the page content so we can just move slot to here and I don't want this to be centered so I'm going to remove these and now we can see that we do in fact get appearance settings and I'm also going to make this a bit smaller the drawer so where is the width let's just make this 48 awesome and we'll add a little bit of padding here as well so let's just do p8 cool so we have this sidebar here with some sidebar items let's go ahead and fill in these links with our settings pages okay so we have the main settings the appearance and the profile and then I can also add a border to the sidebar as well so let's do border right two just to kind of you know show the difference here that this is a sidebar and this is our actual page content right and if we click on for example profile you can see that this sidebar persists on the profile settings and then main settings and appearance settings right but if we go back to about for example we no longer have that sidebar there same thing with home right and you can Nest these as deep as you'd like so we could add you know within settings we could have a separate menu that maybe goes underneath of the primary navigation where it or adds some type of breadcrumb menu or something of that sort inside of our layouts so they can become as nested as they as you'd like them to be so now let's talk about layout grouping so let's read the documentation first um and to get there you actually have to search the documentation you can type Advanced layouts and it will bring you to this page we can see here that by default the layout hierarchy mirrors the route hierarchy in some cases that might not be what you want and then talks about a group so perhaps you have some routes that are app routes that should have one layout and others should have another layout right you can group them in a directory whose name is wrapped in parentheses which does not affect the URL path name of the routes inside of them and then you can also put a plus page directly in the directory inside of the group to make that the root URL so this might sound a little bit confusing but let me clear this up for you real quick so for example let's just say that this is our application so let's say it's a dashboard of some sort where we have a CRM or some type of application where we need users to be logged into to even access any of this right we don't want them to even see the header the sidebar anything without being logged in we want to redirect them to a splash page a login page that looks something like this if I go to tailwindui.com go to components let's just search here for sign in I'm sure that a lot of you have seen something like this right like a split screen sign in page where you know none of the other applications navigation or layout is visible at all you just get this page right so how would we do that currently you know whenever our main layout dotsville has this menu in it so let's just say that we created a new route inside of our application here and we'll call this login and we'll add a page that's felt and then we'll just set up you know a login page right so we'll just do a centered login box similar to something like this for example won't be as pretty because I'm going to do it really quick but um we can just set you know the screen or the height to the screen to the width of full and then we'll say Flex Flex call Item Center justify Center height full width full and we'll just add some spacing in between the inputs and the title and then we'll create H1 so now let's take a look at what this login page looks like currently you can see that wow this is really ugly um let me just add a button here okay so you can see this is our login form here you can see that we still have this layout and even if again we create a plus layout in here and we add our slots you can see that since these layouts all these layouts inherit from that root layout there's nothing we can do here about getting rid of this nav bar at the top right so let's talk about how we can introduce groups to our application right now as it is to kind of make things a little bit better for us so what we'll do first is inside of our routes we'll create a new directory we're going to call one of them app wish me like our main app contents you could call it dashboard whatever you'd like and then I'm going to create another one called auth so all my auth routes or my login and my registration are going to look the same they're going to have the same layout just different number of inputs right so I can group those together and then the rest of my application will have this top nav bar at least so that's where I can group the rest of my application at now since we know that we can't break out of that root layout it's probably best if we keep it as simple as we possibly can so let's go ahead and take all of this take this nav bar out of the root layout and we'll just leave our style sheet within the root layout right and then we're going to move everything for the app into the app folder and then everything for auth into the auth folder so for for example for login we're going to move that into the auth folder for example and then we're going to move about settings as well as the page that's felt into our app folder and we're going to create a new layout in here which is going to have that nav bar with the slot right so now if we go back to our main page here you can see that everything is the same as it was before we have our sidebar on the settings Pages we have the regular nav bar and the rest of the pages except now we go to login for example you can see that we no longer have that layout associated with this login page right so we could then Define for example an entirely new layout for all of our auth routes right and again this is enabling us to have essentially multiple what you could call Root level layouts right because this even though it's in this auth folder it's still just a slash login route here so it's taking from for example if I move this layout into the auth folder and I just add for example my auth layout here you can see that this is going to apply to everything within this auth directory and I could create another route here for register for example create a page that's Felts and then let's just copy the contents of login and we'll just Spam a couple more form form inputs here and then if we go to register you can see that we still get the same layout here so we can essentially have the same way out on all these pages that are root routes that are not nested layouts right that are different from the ones with the rest of our routes such as the app routes right so now that we've covered the basics of layouts we've covered nested layouts and we've covered grouping or layout groups I guess you could call them we're now going to talk about how you can break out of some of those nested layouts right because we didn't really have a choice if we look at our application or our app folder we look at settings we didn't really have a choice when it came to the settings Pages like let's just say for example that we want this profile page here to not have this sidebar right for whatever reason we don't want this profile page when someone clicks on this we don't want this page to have this sidebar right we don't really have a choice because you know if we add a layout here like I just demonstrated a minute ago with the login page it's still going to inherit from The Next Level layout so how do we get around that we can actually break out of layouts and if we look at the docs here we can we can see that says plus page at and you can see that some routes of your app I need to break out of the layout hierarchy so we can add the at sign here and assign it to a specific layout out so we can say this in this example here this ID directory has a layout inside of it so they can assign this to this layout or they can assign it all the way to the root layout so it would skip all the ones right before it so let me demonstrate this really quickly right now the profile settings page inherits from the sidebar layout which is in the settings directory here so this layout here which then inherits from the primary app layout which includes the nav bar which then inherits its Styles stata CSS for example from the root layout so what we can do is we can actually break out of that so let's say we don't want the sidebar for example so we can actually go into our profile directory here and rename this page file to page let's just say at app right so we wanted to keep the navigation bar but we don't want to have the sidebar so as soon as we rename that file and save it you can see that the net that the sidebar has been Stripped Away so now we're only inheriting let me extend this a bit we're inheriting the layout from this app directory here so this layout here which includes the nav bar and then if we wanted to break out of it entirely we can just say page at which will inherit from the root layout which will which will have nothing but the Styles so now we don't have the nav bar at all right and layouts can also break out of hierarchy for example so let's just remove this really quick and then let's just say that everything after a profile we're going to have some more nested routes we don't want any of them to have this sidebar so we can do is we can actually just add a layout in here and say layout at app you want a slot tag so now you can see that if we add a secondary route inside a profile let's just say devices for example something random here and we add a plus page that's fellow here now if we go to profile devices you can see that this no longer inherits the sidebar either because we added it to the layout that is above it right and layouts can also go straight back to the roots we can just remove app altogether and say layout at which is going to be the root and now we get no styling no nav bar just the CSS file so in this video we learned about the basics of layouts we learned how to Nest layouts we learned how to group layouts and then we learned how to reset layouts and Pages you know within those groups and within the hierarchy of layouts that they fall in so I know the layouts can be a little bit complex but I feel like once you start to use them a bit and you get the hang of them they're really not too complicated to understand but of course if you have any questions you can either leave them in the comments below or you can join our Discord we have you know multiple members joining every single day that are you know offering assistance to those who come in and ask questions and if you got value out of this video don't forget to like And subscribe and I will see you in the next video [Music] thank you [Music]

Channel: Huntabyte

Views: 18,124

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit +page.js, sveltekit load functions, sveltekit props, sveltekit endpoints, route params, sveltekit routing, dynamic page sveltekit, sveltekit url, sveltekit form actions, sveltekit forms, svelte forms, sveltekit actions, form actions sveltekit, use:enhance, +server.js, +server, api route svelte, sveltekit API routes, svelte routes, layouts, sveltekit layout groups, sveltekit +layout, advanced layout sveltekit

Id: jCzEJG2osNw

Length: 17min 45sec (1065 seconds)

Published: Thu Oct 13 2022