This episode is for members only
Sign up to access "Getting Started with Nuxt 3" right now.
Get started
Already a member? Sign in to continue
Episodes
01. Introduction
46s
0%
02. Installing Nuxt
5m 40s
0%
03. Creating pages
4m 50s
0%
04. Linking to pages
4m 25s
0%
05. Pages with params
5m 59s
0%
06. Using layouts
4m 22s
0%
07. Components
4m 47s
0%
08. Simple CSS and Sass
3m 53s
0%
09. Fetching data
5m 58s
0%
10. Deferred fetching
5m 14s
0%
11. Picking data
4m 14s
0%
12. Fetching within components
1m 52s
0%
13. Client-side fetching
3m 15s
0%
14. Managing head data
3m 19s
0%
15. Dynamic head data
3m 11s
0%
16. Composables
5m 28s
0%
17. Public files
2m 16s
0%
18. Server API
6m 4s
0%
Transcript
00:00
At the moment we're relying on app.view to be our main layout file with our navigation at the top. This isn't a good idea because things quickly get messy and if we want a different layout for a different section of our site, for example a different layout for our home page or our account area, we would have to do some chopping and changing.
00:19
So Nuxt provides support for layouts which we can create with a layouts directory. Let's go ahead and create that now in the root much like we did for pages. Now what we're going to do is move the navigation over to a default Nuxt layout so we can use this without having to put it inside of app.view.
00:39
Now let's just take a look at this first of all. Inside of layouts we're going to first of all take a look at creating a default layout which will be used for every single page of our site. Let's create that out now and let's define out our template section in here.
00:53
So in here we're going to create out a div and in here we're just going to use a default slot. So any page that Nuxt renders will be automatically placed within this slot. Now at the moment that's not going to look too much different. If we just give this a refresh everything looks the same
01:09
but if we go ahead and just put nav at the top here, if we head over now you can see that every single page will now use nav at the top which is really useful for having a default layout with the navigation at the top of the page instead of putting that inside of app.view.
01:25
There's nothing wrong with putting this inside of app.view but using layouts gives you a little bit more control. We'll see that when we start to look at custom layouts. So let's put this unordered list for our navigation inside of our default layout
01:38
and now that just exists on every single page as a layout. So everything works as we would expect. So inside of here you might want to define out your navigation at the top, you might want some sort of footer just at the bottom
01:52
and then that's going to be rendered out on every single page. Now let's say that we had an account area which looked slightly different. Let's go ahead and create an account.view layout inside of our layouts directory and let's go ahead and create our template in here.
02:06
Maybe this had a slightly different navigation. So let's create out an unordered list again with a list item and we'll just put profile and password in here just to give an example. So in here of course we're going to need our default slot for the content that's rendered in here
02:23
and over in pages let's go ahead and create our new folder with account and let's say index.view. We'll just use this as an example. So this page here that we link through to,
02:34
we want to use the account layout instead of the default layout. So in here let's just say account and let's go over to that page in the browser and we might just need to again close off and rerun npm run dev. Let's try this out and there we go.
02:51
So this is using our default layout. How do we change that within this page? Well we can still use script setup in here as we normally would. So let's go ahead and define that out.
03:02
But what we can also do down here is do a normal script and then go ahead and export an object like we normally would with view 2 and then go ahead and define the layout in here that we actually want to use. That's going to be account.
03:17
So let's see what happens when this changes. Now we're over in the account section. Notice the navigation has changed to use that account layout. When we go back to our home page everything else looks normal
03:29
until we go through to account which uses a different layout. So most of the time this is going to be enough for you to create different layouts and go ahead and use them on different pages. This can get a little bit more advanced with nesting
03:43
but for most of the cases this is going to be enough. This just helps keep every section of your site really nicely tidy. Now like I said we can still use script setup in here. So just as an example let's go ahead and define our variable in here
03:58
and let's go and just output this name. So we can still make use of this inside of here even though we're using that standard script section to define the layout. So there we go.
04:10
We have our default layout for every single page that we've created which includes our nav and our footer but then we've created a specific account layout which we can use for just the account area.
18 episodes•1 hr 15 mins•2 years ago
Overview
Nuxt is a framework built on Vue that makes development of applications a breeze. In this series, we'll get set up with a fresh project and work through everything you need to know to start building with Nuxt.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.