Vue.js - How to give the active menu link a dynamic colour

Question

So as the title suggest, I am trying to give each menu item a different colour when its active. I have attempted trying to achieve this by following these 2 code examples

1 -> https://codepen.io/Ranushka/pen/KKPBYQv

2 -> https://codepen.io/Ranushka/pen/ZEzjdrO

But I am struggling because in these examples they are working with a for loop. So I have tried adjusting the code but is not working out for me.

You can find my code here -> https://codepen.io/GY22/pen/vYNeOvQ

       <nav class="nav bg-darkGrey fixed w-full z-10 top-0 shadow">
             <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto lg:block mt-2 lg:mt-0 bg-darkGrey z-20">
       <ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page1" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline   
              hover:text-red-800 border-b-4 border-gray-900 hover:border-red-800">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Dashboard</span>
            </router-link>
         </li>

         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page2" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline     
              hover:text-blue-400 border-b-4 border-gray-900 hover:border-blue-400">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Users</span>
            </router-link>
         </li>

         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page3" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline   
              hover:text-pink-400 border-b-4 border-gray-900 hover:border-pink-400">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Posts</span>
            </router-link>
         </li>
       </ul>  
    </div>
        </nav>

This is what I am trying to achieve

I hope someone can steer me in the right direction. Thanks in advance

I am not familiar with tailwind-css, but I see it uses syntax like `hover:border-blue-400`. What is the equivalent for focus/clicked? would it be `focus:border-blue-400`? — Simo Mafuxwana, Apr 30 '20 at 20:19
So you do not want to use loop? Why? Also, your code works, so where exactly is problem? — chojnicki, Apr 30 '20 at 20:20
@chojnicki I think it will get complicated, still quite new with vue.js and not sure how to loop my router-link with icon and all (codepen I provide is a simpler version of my code) — GY22, Apr 30 '20 at 20:21
@GY22 ok so you did make it without loop, and colors on hover works. So what is wrong with your code? — chojnicki, Apr 30 '20 at 20:24
@chojnicki yes the hover I got to work but when I am on a page then that menu item is active and thus needs to have a color. you know like css hover, active, etc — GY22, Apr 30 '20 at 20:25
How is this question different from this one you already asked some days ago, that I've answered yesterday? https://stackoverflow.com/questions/61415704/tailwind-css-how-to-make-the-current-menu-item-active — Estevan Maito, Apr 30 '20 at 20:29
@EstevanMaito because the other question I thought I had to solve with tailwind css turns out I have to do it with vue.js I will delete the other question — GY22, Apr 30 '20 at 20:32
@EstevanMaito I think the difference with `:active` is it only works for `a` tags. In vue he is using `router-link` and somehow this is not interpreted as an anchor tag therefore `:active` is not triggered — Simo Mafuxwana, Apr 30 '20 at 20:35
Duplicate of https://stackoverflow.com/questions/46083220/how-to-vuejs-router-link-active-style — Estevan Maito, Apr 30 '20 at 20:39
There is so many things wrong. Code in codepen cannot work since you do not have router initialized, so will be raw html tag that does not exist. Also main html template should be only for Vue init - you do not type there any other html. :to="page1" cannot work because you are pointing to data/method that does not exist. It should be text so to="page1" (without :) or :to="'page1'". And this is not all. Please start with any Vue course/tutorials because you would know all of this after one lesson. You are trying to learn to many things at once (tailwind, vue, vue router etc). — chojnicki, Apr 30 '20 at 20:47
@chojnicki I get what you saying but never really taken to codepen. my actual code is correct. but it seems people always like some live sample code so I just made a quick code pen (was my first time) and the point was not so much on focus with the vue router etc but more on just getting the active item to display a different color. anyways my hunt continues. thanks — GY22, Apr 30 '20 at 21:01
this link may help https://stackoverflow.com/questions/46083220/how-to-vuejs-router-link-active-style — Clarance Liberiste Ntwari, Jul 07 '20 at 15:34

GY22 · Accepted Answer · 2020-05-01T21:30:23.897

so I finally got it to work but in a very simple way without bind and click ....

so the solution is just add a css class of your choice to the router link and seeing as when the link is active it already has the .router-link-exact-active class then just add the css styling

so the code would be like this:

  <router-link class="menuItem-active-link" :to="{name: 'dashboard'}">Dashboard</router-link>

 .router-link-exact-active.menuItem-active-link{
    border-bottom-color: #F19238;
    color:#F19238
 }

catmal · Answer 2 · 2020-05-01T05:34:08.350

If you need to do it using strictly vue:

Add event and bind class for each link, for instance:

 <router-link @click.native="isActive = 'dashboard'" :to="/page1" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline  hover:text-red-800 border-b-4 border-gray-900 hover:border-red-800" v-bind:class="{ active: isActive == 'dashboard'" }>

Dashboard

Then in data you define:

isActive: ''

or for instance if you want dashboard link to be active when you open the page:

isActive: 'dashboard'

Then you define active style:

<style>
.active {
color: green;
}
</style>

This is just an example, then you can bind class to element you need and set the active class as you like.

Vue.js - How to give the active menu link a dynamic colour

2 Answers2