nav-link 컴포넌트 제작 > nuxt-link 를 nav-link 로 변경, 공통컴포넌트추가

components/shared/NavLink.vue

@@ -0,0 +1,30 @@
+<template>
+  <nuxt-link :to="to" :class="{'is-active': isActive}">
+    <slot />
+  </nuxt-link>
+</template>
+
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    isActive() {
+      debugger
+      return this.to === this.$route.path
+    }
+  }
+}
+</script>
+
+<style scoped>
+  /*TODO: Get here color variables*/
+  .is-active {
+    border-bottom: 4px solid #4bacff;
+    font-weight: bold;
+  }
+</style>

components/shared/Navbar.vue

@@ -22,21 +22,21 @@
     <div id="navbarBasicExample"
          class="navbar-menu">
       <div class="navbar-start">
-        <nuxt-link to="/" class="navbar-item">
+        <nav-link to="/" class="navbar-item">
           Home
-        </nuxt-link>
-        <nuxt-link to="#" class="navbar-item">
+        </nav-link>
+        <nav-link to="/courses" class="navbar-item">
           Courses
-        </nuxt-link>
-        <nuxt-link to="/blogs" class="navbar-item">
+        </nav-link>
+        <nav-link to="/blogs" class="navbar-item">
           Blogs
-        </nuxt-link>
-        <nuxt-link to="#" class="navbar-item">
+        </nav-link>
+        <nav-link to="/about" class="navbar-item">
           About
-        </nuxt-link>
-        <nuxt-link to="#" class="navbar-item">
+        </nav-link>
+        <nav-link to="/cv" class="navbar-item">
           Cv
-        </nuxt-link>
+        </nav-link>
         <!-- <nuxt-link to="/instructor" class="navbar-item">
           Instructor
         </nuxt-link>

nuxt.config.js

@@ -35,6 +35,7 @@ module.exports = {
     {src: '~/plugins/filters'},
     {src: '~/plugins/vuelidate'},
     {src: '~/plugins/integrations'},
+    {src: '~/plugins/components'},
     {src: '~/plugins/toasted', ssr: false},
     {src: '~/plugins/paginate', ssr: false}
   ],

pages/about.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>I am about page</h1>
+</template>

pages/courses/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>I am Courses page</h1>
+</template>

pages/cv.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>I am CV page</h1>
+</template>

plugins/components.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import NavLink from '~/components/shared/NavLink'
+
+Vue.component('NavLink', NavLink)