- [Instructor] Nuxt uses a concept called layout and pages.
It's easy to think that it means same thing
or that they are interchangeable, but they are not.
Let's see where they are and how to use them.
First, we have the layouts.
Layouts in Nuxt are the building blocks of your application.
They help you change to look and feel of your app,
whether you want to include a navigation menu,
a sidebar or even have distinct layout
for mobile and desktop, while pages are
the application views and routes that you create
and can view directly on the browser.
Let's see how to create a layout
and a page in our Nuxt application.
First thing we need to do is create
a new folder called layout and to do that,
I'll click this new folder icon and call that layouts.
Inside the layouts folder, I would right-click,
click New File and call our new file default.vue.
Now, the default.vue file will serve as the default layout
for all the pages we have in our Nuxt application
as long as we don't have a layout property specified.
Inside the default.vue file,
we want to add the Nuxt component.
Let's do that.
First, we'll add a template
and inside that, add the Nuxt component.
Now, what this Nuxt component does is
that it injects all the pages inside the layout.
You can also have other components as well,
like a navigation or a footer.
Now, I've gone ahead to create two new components
called AppFooter and AppNavigation,
and I want to include it in my default layout.
So let's do that.
Here, I would add app-navigation and also add app-footer.
We have a problem too with eslint,
and that's because you're missing something.
Now in vue, in any vue file, in the template section,
you need to always wrap multiple components
with an enclosing element.
In our case, we need to wrap this with a div.
So I'm going to highlight everything here.
Use the command Command + Shift + P,
search for Wrap with Abbreviation, click that,
and I want to wrap it with a div.
So type that. Cool, now we have that fix.
We can head over to the browser
to see what this page would look like.
On the browser, we have the index page,
and it's using the default layouts we created
because we can see the navigation component
and the footer components are included.
Let's head back to the editor.
Now, you can also create multiple layouts
for different pages.
For example, if you have a blog on your website,
but you don't want to use a navigation or a footer there.
You want to have like a distant layout for it.
You can create a new layout for that
and in our case, we'll try to do that
by creating a new file, right-click, New File
and call that blog.vue.
Now we want to repeat the same process.
We'll have a template.
Inside templates, we add an enclosing div,
then we had the Nuxt component.
Now in order to make this stand out
or make it different from the default layouts we created,
I would add a paragraph stating that this is a blog layout.
Now, we have different layouts, but how do we use it?
Let's head over to the pages directory
and inside that, click on the index.vue file.
Currently, this file uses to default layouts,
but we would like to change that.
To do this, I'll add a property here,
in the script session of this file, called layout,
and I would like to add the name of the layout.
In this case, it's blog, all right?
So heading back to the blog.vue.
Just so eslint doesn't scream,
I'm going to add one additional line here
and head back to the browser.
So we can see here, on the browser,
that our index page now uses a different layouts.
It now uses the blog layouts that I created.
So that's how you use layout in Nuxt.
You can have a default layout,
or you can even have multiple layouts
but always remember to specify the name
of the layout in the layout property
inside the page you want to use it.
What about pages? Like, how do they work?
We have a page here called index.vue,
and I mentioned that a page is the application view
of your Nuxt app, and Nuxt will automatically generate
a route for every page you create.
Let's see how that would work.
I want to create a new page here
by right-clicking, clicking New File,
and I'll call that page gallery.vue.
Now, to show you how Nuxt works under the hood,
I'll head over to the Nuxt build directory here
and go to the routes.json file.
Now, for every new page I created,
Nuxt automatically creates a route configuration.
Here, we already had index, but I just created gallery,
and Nuxt already configured that part for me.
So now if I go to my browser and navigate to /gallery,
I would see a page already displayed there.
Right now we don't have anything in the gallery.vue file.
So let's add something there.
Start with the templates.
Here, I'll add a div and inside this div,
h1, Gallery Page
and a paragraph,
Here is my gallery.
Now, if I head over to the browser
and go to the path /gallery, interestingly enough,
this is using the default layouts that I created, right?
But here we have our gallery page,
and it's using the default layouts
because we can see the navigation
and the footer that I included earlier.
So there you go.
We've explored how to use layouts and pages in Nuxt,
and I hope that clarifies the differences for you,
and now you know when to use either of them.