- [Instructor] Okay, so at this point, we have
all three of our site's pages created.
The only problem is that in order to navigate
between the pages, we're still sort of forced
to type in the URLs manually to the browser.
So in order to get to the Cart page,
we have to type in /cart;
in order to get to the Products page,
we have to type in /products, et cetera.
Now obviously, we need something better
and because of that, what we're going to do
is we're going to create a navigation bar
that will close the gaps in navigation
that our application has, currently.
Now this is going to be a pretty simple nav bar.
It's only going to have two links:
one for going to the Products page
and the other will be a button that takes the user
to the Shopping Cart.
So the first thing we're going to do here,
is we're going to close our Cart page
and inside Components, we're going to start off by deleting
this hello world component since we don't need it anymore.
And we're going to create a new file in here
called NavBar.vue.
And then, just like the rest of our components,
this one is going to have three main parts.
The template, which we'll implement in just a second.
It's going to have these script tags, like this,
and for the styles here, just like we did
with our page components, we're just going to
copy and paste those from the N state
of this video's exercise files.
So let's do that.
And paste it.
And there we go.
So now, let's get to the rest of our component.
We're going to start off with this script tag, here.
So we're going to define a default export
just like we've done with our other components.
And the name property here, is just going to be NavBar
and that's actually all we need to do for this, right now.
So that's pretty boring, but let's move on to the template.
Here's what the template here, is going to look like.
We're going to start off by having a Div
with the ID equal to nav-bar.
This again, will help with styling.
I'm going to just close that div, there.
And we're going to have the router-link
linked to, and we're just going to hard-code this, here.
We're going to link it to /products.
And the ID of this is going to be the products-link.
And inside this router-link component,
we're going to have an H1 heading with the name
of our site, which again, is going to be Fabulous Footwear.
And then we're going to close the router-link tag,
just like that.
And underneath there, we're going to have another
router-link that is going to be our link
to the Shopping Cart page.
So here's what that's going to look like.
We're going to say router-link, again.
We're going to say to /cart, ID equals cart-link.
And inside here, we're going to define a button
and this button is just going to say Shopping Cart.
And we're going to close the router-link
and that should be all we need to do.
So now that we've created our NavBar component
let's display it inside our App.vue component.
So we're going to open that up.
Okay, open up App.vue
and the way that we do that is, well, first we're going to
start off by deleting these two existing links
since we don't need 'em, and in fact,
we're going to delete this div here, as well.
Make sure you leave the router-view,
since again, that's where the corresponding routes
are going to show up, right?
That's where our different pages show up,
depending on the current route.
And right above the router-view
we're going to display our NavBar component
by saying NavBar, just like that.
So this is the first time that we've really seen
a component display another component, directly,
inside its template.
And in order for this to actually work, though,
there are two things that we're going to need to do.
The first thing we need to do is we need to import
the NavBar component into our
App component's script section.
So since our App component doesn't actually
have a script section at the moment,
we're going to add one, here.
And inside there, we're going to say export default,
and we're going to export a default object.
Up above that, we're going to say import NavBar
from ./components/NavBar.vue
and inside this default export object
we're going to give our component a name.
We're just going to name it App.
And underneath that, this is the second thing
that we need to do in order for this to work is
we need to add a Components property.
And this Components property is going to contain
an object with entries corresponding to the
different components that we want to display
up here in the template.
So in our case, it's just going to look like this.
We just have to say NavBar and that'll insert
this NavBar that we're importing into our App component
so it can display it inside of its template.
And doing this, by the way, is what's called
registering a component.
Basically, it tells the parent component what to display
when it runs into that component's name
inside of its template.
And if we forget to do this, which I often do,
then basically, we'll just get an error telling us
that we haven't registered whatever component
we're trying to display.
The error messages for that are usually pretty helpful
but it's usually good to just remember ahead of time.
And that should be about it for our component.
The only thing that I'm realiZIng now is that
I accidentally named this with a capital letter,
which will give you a very cryptic error.
So let's change it to that
and we may have to re-run it.
And there we go.
So now that we see that we have our very good looking NavBar
and if we click on Shopping Cart, that'll take us
to the Cart page and if we click on our Fabulous Footwear
heading here, that'll take us to the Products page,
even from the Product Detail page.
And that's about it for the NavBar.