'How can I get Vue Router to append the 'link-exact-active-class' at the end of the classlist?

I'm trying to highlight the active link inside my navigation bar by using the linkExactActiveClass parameter in the router construtor.
My issue is that the active class is being added at the start of the css class list, which means that other classes overwrite it.

Here is my router configuration:

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkExactActiveClass: 'text-yellow-500',
});

The router-link element looks like this:

<li>
    <router-link class="px-2 text-white" to="/manage">Manage</router-link>
</li>

The issue:

The text-yellow-500 class does get added before the already existing css classes. This results in the yellow text being overwritten by the text-white class. How can I change this?

class gets added at the start

cssvue.jsvue-router


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions