Nuxt.js: <nuxt-link> not working with bootstrap-vue

[yuruyuri16]

Version

v2.11.0

Reproduction link

https://codesandbox.io/embed/shy-resonance-q20q5?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

Start clicking in the Home and About nav items.

What is expected ?

Change routes

What is actually happening?

Nothing happens

[reegodev]

If you inspect your html, you can see

<ul class="navbar-nav">
  <a href="/" class="nuxt-link-exact-active nuxt-link-active">
    <li class="nav-item">
      <a target="_self" href="#" class="nav-link">Home</a>
    </li>
  </a>
  <a href="/about" class="">
    <li class="nav-item">
      <a target="_self" href="#" class="nav-link">About</a>
    </li>
  </a>
</ul>

<b-nav-item> component already creates a link, and if using Nuxt creates a <nuxt-link> instead of a <router-link>. Your navbar can just be

<b-navbar-nav>
  <b-nav-item to="/">Home</b-nav-item>
  <b-nav-item to="/about">About</b-nav-item>
</b-navbar-nav>

[yuruyuri16]

Thank you so much.