Allow defining an inactive-class

[christhofer]

What problem does this feature solve?

We already have prop active-class that will be appended to the element when the route is active.
But what if that we need to specify class only when the route is not active?

example:
when active => .btn-primary
when inactive => .btn-secondary

What does the proposed API look like?

<router-link
    :to="{name: 'purchase'}"
    class="btn"
    active-class="btn-primary"
    inactive-class="btn-secondary">
    Purchase
</router-link>

[martiendt]

You can use class binding and compare it with your routes

<router-link
    to="/purchase/purchase-request"
    class="btn"
    :class="{'btn-secondary': this.$route.path != '/purchase/purchase-request'}"
    active-class="btn-primary">
    <span><i class="si si-folder-alt"></i> Purchase Request</span>
</router-link>

[christhofer]

You can use class binding and compare it with your routes

<router-link
    to="/purchase/purchase-request"
    class="btn"
    :class="{'btn-secondary': this.$route.path != '/purchase/purchase-request'}"
    active-class="btn-primary">
    <span><i class="si si-folder-alt"></i> Purchase Request</span>
</router-link>

Still need additional logic if want to match purchase/purchase-request/create and other link
You need indexOf !== -1 for this

[posva]

Add a regular class to those specific links and override them with the active class: class="btn btn-secondary" active-class="btn-primary"

[christhofer]

Add a regular class to those specific links and override them with the active class: class="btn btn-secondary" active-class="btn-primary"

@posva but that will be rendered as class="btn btn-secondary btn-primary"
instead of class="btn btn-primary"

[posva]

I'm reopening this as it does make sense for utility-first CSS frameworks like Tailwind

[posva]

I realized the feature request isn't clear, especially given the changes on v4 for the active/exact active behavior: vuejs/rfcs#136

Should inactive be non active or non exact active? At this point why not add both inactive-class and exact-inactive-class? Which would create 4 classes that can be overridden by the user, making it more complicated for beginners.

It's important to note that in v4, exact-active is likely to be the class most people will hook on because links are active if any of their children are active (see RFC). TLDR: Exact active will be active only if the link corresponds to the actual location the user is at, there is no need for exact prop anymore

[christhofer]

I don't quite understand the confusion about this request. High prio high complex?

Vue-router already know when to append active class
Can't we just make it a simple ternary

isActive ? activeClass : inactiveClass

With inactiveClass default value is empty string.
So if user doesn't set inactive class, it will just append empty string.

[posva]

It could also be isExactActive ? exactActiveClass : exactInactiveClass