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...