Feature request: have active-class behave like class on router-link

denjaland commented 3 months ago

What problem is this solving

Currently, the router-linke active-class attribute accepts only a string as accepted value. e.g.:

  <router-link active-class="bg-teal-500">...</router-link>

There are some cases however where we have reusable components that can have a different color. We would like to be able to do the following:

<router-link
  :active-class="{
    'bg-primary-800': color === 'primary',
    'bg-fuchsia-800': color === 'fuchsia',
    'bg-green-800': color === 'green',
    'bg-yellow-800': color === 'yellow',
    'bg-red-800': color === 'red',
    'bg-teal-800': color === 'teal',
    'bg-purple-800': color === 'purple',
  }"

similar to how the class property accepts these objects.

Proposed solution

Apply same behaviour / support for class to the router link's active-class

Describe alternatives you've considered

No response

posva commented 3 months ago

Since you can build such string with a computed property, there is no need to add an extra abstraction layer for this. You can also create your own custom router link extension: https://router.vuejs.org/guide/advanced/extending-router-link.html#Extending-RouterLink

denjaland commented 3 months ago

Hi @posva, I agree it can be build with a computed property, but something like tailwind won't like it as it won't be included in the tree shaking algorhitm. Also, it would just align both property's behaviour.

Are you saying you won't accept a PR for this, or that you are open for it but don't have time for it at this time? In the first case, I might invest some time - otherwise, I'll just customise on our end.

posva commented 3 months ago

I'm not planning on adding this feature. FYI if I close as not planned I mean it that way. Last time I tried, tailwind will still pick these classes from the js/ts part in vue files if they are included. In any case, it's usually more convenient to have a wrapper like mentioned in docs. Cheers.

vuejs / router