CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
Thuan Nguyen
Thuan Nguyen

Reputation: 886

Add is-active class Bulma to router in Vue

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.

Upvotes: 2

Views: 4638

Answers (2)

Abhishek Gupta
Abhishek Gupta

Reputation: 1337

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

Upvotes: 8

Phiter
Phiter

Reputation: 14992

To add a class, simply put the class property on it:

<router-link class="is-active"></router-link>

Every component accepts that. It'll apply the class to the first element inside the component's template. In router-link's case, it's an <a> tag.

But keep in mind that router-link accepts a property active-class that you can use to put a css class to the currently active link, which sounds like what you're trying to do. So that's probably better, since Vue will detect which route you're currently at and put the class there for you.

Would look like this:

<router-link active-class="is-active"></router-link>

If you want to use this class on every active router-link, you can also set the linkActiveClass option in the router's constructor so you don't have to set active-class in every link.

Upvotes: 0

Related Questions