Building Applications with Vue & Nuxt

Building Applications with Vue & Nuxt Create a Footer & Restaurant Page Solution

Learning Paths:
Topics:
Sarah Drasner
Sarah Drasner
Netlify
Check out a free preview of the full Building Applications with Vue & Nuxt course:
The "Create a Footer & Restaurant Page Solution" Lesson is part of the full, Building Applications with Vue & Nuxt course featured in this preview video. Here's what you'd learn in this lesson:

Sarah walks through the solution to the Create a Footer & Restaurant Page exercise.

Get Unlimited Access Now

Transcript from the "Create a Footer & Restaurant Page Solution" Lesson

[00:00:00]
>> So, our problem was to create the footer and create the restaurants page and kind of link everything up, right,put the restaurants page in the nav, and then also add that grid to the restaurants page. So if we go to where we're at now, we've got home and restaurants.

[00:00:19] We've got a page for restaurants, right now the restaurants looks goofy. Don't worry, we're gonna fix that in just a minute. We also have a sticky footer. And that sticky footer is on each page. And even if we had not so much information, it would stay down. It used to take a lot of styles to do that.

[00:00:39] But now with Flexbox it's not so hard. Okay, so let's check out what we did in order to make that work. What we did was, we added in a new li with that next link. And this one doesn't have an exact, it just says, to restaurants and then goes to restaurants.

[00:00:58] We added a restaurants page, I should mention also, I'm using mean class container for every single page just to keep my styles in order. And I'm also gonna add the name of the page, as one of the pieces of the styling here. So, we've got that at restaurants, we've got our restaurant info, and then we also have our app footer.

[00:01:23] And our footer I mentioned before if we make sure that it says footer and uses the footer tag, it will display the correct information the correct way. So we added the footer. And in order to actually display the footer, what we did was we went into that defaults file and we put the footer at the bottom outside of the content.

[00:01:45] So we imported the footer and add it here. And then we added it up here as well. And now it will persist on every single page because that default.view is really powerful. So, now we can be able to show this grid, we're using this grid as a reusable component between the home and the restaurants page.

[00:02:06] So let's make sure to check that off.