Name: Build Global Navigation with Layouts and nuxt-link in Nuxt
Uploaded: 2017-08-21T22:42:01-05:00
Description: nuxt-link’s are used to build out clickable navigation in your application. This lesson walks through building a global navigation that you reuse across pages which allows the user to quickly navigate the news app.

Start a Nuxt Project with npx and the Vue.js CLI

Add a CSS Library from npm to Nuxt

Add JavaScript Libraries from npm to Nuxt

Create a Vuex Store for Global Data in Nuxt

Load Data into the Vuex Store in Nuxt

Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt

Build Global Navigation with Layouts and nuxt-link in Nuxt

Create CSS Transition Effects in Vue.js and Nuxt

Style a List and List Items in Vue.js and Nuxt

Register Vue.js Filters as Plugins in Nuxt

Style Navigation Based on Route in Nuxt

Display Only Available Data in Vue.js and Nuxt

Display a User Data Page Based on id in Vue.js and Nuxt

Build a Recursive Component for Nested Comments in Vue.js and Nuxt

Create a News App with Vue.js and Nuxt

nuxt-link’s are used to build out clickable navigation in your application. This lesson walks through building a global navigation that you reuse across pages which allows the user to quickly navigate the news app.



Building a navigation to support all of our new pages is simply a matter of creating a new layout called default. This layout is essentially the same idea as our page loading the component, and then using it.

The layouts load a page and then use it, but the way it looks is like template and then some sort of a container - a div is fine -- and then Nuxt is where any of our pages will be rendered.

Above Nuxt, I can create a header as a nav, and this will have some Nuxt links in there with a two property, and we'll need five of them. We generate that, close the sidebar so we have our home link. This is home.

We have our new link. This is new. We have our show link, so this is show. We have our ask link, so this is ask. And then we have our jobs link, which is jobs.

I'll run this, fire it up, and you'll see home, new, show, ask, jobs. To style this a bit, let's use the tachyons classes, say this is flex. It has a width of 75 percent.

Then we can justify around them, see what this looks like. These are nice and spaced out now. We'll just make the font size four, and we'll reuse our code font, then top it off. I'll add a tiny bit of padding. This will work just fine for our needs.

Build Global Navigation with Layouts and nuxt-link in Nuxt

Share this video with your friends

Course

Create a News App with Vue.js and Nuxt