Vue.js 2 Web Development Projects

Creating a navigation menu

Instead of manually typing the URL, it would be great to have a proper navigation menu in our app! Let's create a new NavMenu.vue file in our components folder:

<template>  <nav class="menu">    <!-- Links here -->  </nav></template>

Next, we will add it in the layout. Import the new component in the AppLayout one:

<script>import NavMenu from './NavMenu.vue'export default {  components: {    NavMenu,  },}</script>

Then add it to the AppLayout template:

<header class="header">  <div><img class="img" src="../assets/logo.svg"/></div>  <div>My shirt shop</div></header><NavMenu />