Super helpful for everyone using a utility-based css framework like Tailwind.

Just stumbled upon this. Looks like this was already solved a long time ago and just needs to be merged?

@tobihagemann At the time (more than a year ago now) that this was submitted, there was a lot of working going into vue-router@4 and @posva was very busy. Check out the related issue above for more detail, but ultimately, a solution is posted in the documentation for Vue Router 4: https://next.router.vuejs.org/guide/advanced/extending-router-link.html.

This documentation details an <AppLink> component that extends RouterLink and gives you everything needed to implement an inactive-class property. With that said, I still think a flavor of this belongs in vue-router because I've now implemented this component 10+ times in different project. It's an absolute requirement if using TailwindCSS (or TailwindUI).

I'd be happy to dig into this again and help move it forward if the maintainers are interested.

I'm closing this out; clearing lines of work with no clear path forwards resolution. If there is renewed interest in this feature, I am happy to contribute but reimplementing this in every project is not too bad.

For anyone using Tailwind CSS, if your classes are not too numerous you can emulate this feature by using the important modifier for active classes, e.g:

<router-link
  :to="{ name: 'root' }"
  active-class="!border-red-500 !text-gray-900"
  class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
  Home
</router-link>