Adding navigation to Nuxt apps via the components folder
At this point in our app development, it would be great to have the navigation in place. Navigation itself is not a page; it is a component that should exist in each page of our app. Therefore, let's create it by opening the components
folder and adding a new file, which we'll call Navigation.vue
. Let's add this code to it:
<template> <div class="navigation"> <ul> <li><nuxt-link to="/">Home</nuxt-link></li> <li><nuxt-link to="/contact">Contact</nuxt-link></li> <li><nuxt-link to="/news">News</nuxt-link></li> </ul> </div> </template> <style scoped> .navigation { width: 100%; margin: 0; padding: 20px; background: orange; color: #444; font-family: Arial, sans-serif; font-size: 20px; } ul { list-style: none; } ul li { display: inline-block; } </style...