Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Already a member? Sign in to continue

Playing

06. Using layouts

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.

Episode summary

In this episode, we dive into how to use Nuxt's layouts feature to better structure the different sections of your site. Up until now, we've just been throwing everything – including our navigation – into app.vue, but that's not really scalable. If you want different layouts for, say, your homepage and your account area, it gets messy fast.

So, we start by creating a layouts directory in the root of our project. Here, we move our navigation markup into a new default.vue layout. This layout wraps all our pages automatically, keeping the navigation consistent without bloating app.vue.

Then, we look at how to set up custom layouts. For example, if our account area needs a special navigation bar, we create an account.vue layout. We show how you can tell a specific page (like account/index.vue) to use this new layout instead of the default one by exporting a layout property from its script section. That way, your account pages look different from the rest of your site, all with minimal fuss.

You'll learn how layouts keep your code much tidier and make it easy to have different sections of your site share or vary key layout elements. We also see that using script setup still works nicely alongside specifying a custom layout. By the end, you've got a default and a custom layout in play, and you know exactly when and how to use them!

Episode discussion

No comments, yet. Be the first!