Add is-active class Bulma to router in Vue

Question

I'm working on the router in Vue js. I display the current link in Navbar by adding style for router-link-active and exact property for each <router-link>. It's work fine.

But now I'm trying to use class is-active (Bulma CSS) to do it. How can I do that ?.

Code

<a class="navbar-item is-active">
      <router-link to="/" exact>Home</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/about" exact>About</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/information" exact>Information</router-link>
    </a>

Any logical and solutions ? Please help me.

Answer 1

You can specify the name of the active class in vue-router constructor by using the linkActiveClass option.

import Router from 'vue-router'

export default new Router({
 linkActiveClass: 'is-active',
 mode: 'history',
 routes: [ ... ]
})

This will add is-active class to the active router-link instead of router-link-active. Read the docs here: https://router.vuejs.org/en/api/options.html#linkactiveclass