NavLink.vue 474 B

123456789101112131415161718192021222324252627282930
  1. <template>
  2. <nuxt-link :to="to" :class="{'is-active': isActive}">
  3. <slot />
  4. </nuxt-link>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. to: {
  10. type: String,
  11. required: true
  12. }
  13. },
  14. computed: {
  15. isActive() {
  16. // debugger
  17. return this.to === this.$route.path
  18. }
  19. }
  20. }
  21. </script>
  22. <style scoped lang="scss">
  23. /*TODO: Get here color variables*/
  24. .is-active {
  25. border-bottom: 4px solid $primary;
  26. font-weight: bold;
  27. }
  28. </style>