Nuxt 3 Crash Course #6 - Layouts

Key Takeaways

all right then my friends so in the last lesson we used these next link components to create links in the page and we put those inside a header and that header is currently on the about page and also the index page now ideally I'd want to place this on other Pages as well if we created them in the future and maybe the products page so what I'd have to do is copy this and paste it inside each of those components and then whenever there's a change to the header I'd have to go through each of those components and update the header right now that's probably not the best way of doing it because we're repeating the code and taking loads of time to update the code if we need to so instead in next we can create layouts where we just defined the code once that's common to every page and then if we want to update it we only have to do it once and that layout is going to wrap all of these different page components in so how do we do this how do we create layouts that's simple in the root directory create a folder and that's going to be called layouts and then we can create different kinds of layouts but if you want a default layout that's going to basically wrap every single page in your application you can create that by making a file called default Dot View like so and all I want to do inside this is copy all of this template right here so let me grab that and paste it in I want to get rid of the home page content because we don't need that we just basically want this header right here and then after the header this right here is where we want to Output page content right so how do we do that well we use a component called slot so I'm going to do a div tag first of all and then inside that I'm going to use a component called slot like so and this is a built-in component that next gives us and when it sees this inside the layout it says okay well this is where the page content is going to go so that's it now automagically next is going to look for this default layout and it's going to wrap all of our Different Page components and those page components are going to be output right here where the slot component is all right so what I'm also going to do is just add a style to this down here I'm going to paste it in and all we're doing is styling those active links remember in the last lesson I showed you when we had these nuxed link components when we're on that current page it applies classes to them to say that they're active so we're styling one of those classes so it colors that link a little bit differently so I'm going to save this now and then we can go back to the index component and we can get rid of the header from here because now it's inside the layout file save that and also go to the about component and get rid of it from here as well so let's save this and preview now in a browser oh right then so in a browser we can see we still get that nav bar at the top awesome as we should do everything's working the same way and we can go between these different components and also if we go to the products page it should be showing on there because that layout component is now being applied to all pages in the site next takes care of that for us now we don't need this thing right here so I'll delete that in a second but also I want to show you how we can create custom layouts as well that we can apply to certain pages for example we might want the default layout for all of these Pages like home and about or contact if we had one but then we might want a different type of layout for the products page and also the products ID page and by the way if we go to that so one two three we should get that layout as well so how do we create these custom layouts well it's pretty simple to do all we have to do is create a new file inside the layouts folder so let's do that and you can call this what you want I'm calling it products.view because I want this to apply to all of the different product pages now it doesn't have to be called products if you want it to apply to the products Pages these names don't have to match the folder name and this layout name it can be called ABC and I could still apply it to anything inside this products folder it doesn't matter but I'm just naming it products because it's obvious to me now that this is going to be the layout file for all of the different product pages okay then so inside here I'm basically going to go to the other layout copy that and paste it in and I'm just going to change this a little bit so up here I want to first of all get rid of that anchor tag and also go to the default layout and get rid of that as well we don't need that so let's save it and then I'm going to grab this UL right here and cut it and then I'm going to paste that maybe at the bottom of the page so let's do a footer down at the bottom then inside here I'm going to Output these notched link components so it's pretty simple we're basically just splitting the template into two different parts we have the header at the top which has the title and in fact we'll say next Dojo merch because we're now on the products page and if you click on this it's just going to take us now to forward slash products and not back to the home page and then down here we have all of the old site links as well so just a slightly different template so now we have this product template right here this product layout but how do we then apply it to the different pages how do we say for example that look we want this index component inside the products folder to have that products layout well what we can do is use a special composable function that next gives us inside the script called Define page meta and this function accepts as an argument an object and there we can specify a layout property to specify which layout that we want to use now it's telling us we have default our products so we just want to use the products layout and now the products layout will be applied to this particular page so I'm going to save that I'm also going to copy this and go to the ID page over here and paste it here as well so that for both of these Pages we're using the products layout all right so now on the home page we can see the default layout on the about page we can see the default layout if we go to product it's going to change slightly the links are going to go to the bottom and we can see that we get the title up here next Dojo merge which goes to forward slash products and also beneath the actual content we get these links so if I go to forward slash 123 it should be the same layout as this page press enter and we can see again we get the alternate layout where the title is at the top then the content then The Links at the bottom awesome so that's how we use layouts in next