routing within dropdown: <router-link>'s tag & event prop is deprecated

[DerKleineGauss]

Describe the bug

Apparently the <b-dropdown-item> component creates router-link with properties tag and event by default. As a consequence Firefox console prints two warnings:

[vue-router] 's tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.

[vue-router] 's event prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.

Steps to reproduce the bug

1. Implement vue-router to vue-bootstrap project as described here : https://router.vuejs.org/installation.html#npm
2. Within template of some component use <b-dropdown> or <b-nav-item-dropdown> like so:
   <b-dropdown text="This dropdown"> <b-dropdown-item to="/home"> Home </b-dropdown-item> </b-dropdown>
3. check in browser and get above mentioned warnings

Expected behavior

Dropdown components should use new v-slot API instead of tag and event when creating a <router-link>.

Versions

Libraries:

• BootstrapVue: 2.21.2
• Bootstrap: 4.5.3
• Vue: 2.6.11
• Vue-Router: 3.5.1

Environment:

• OS: Windows 10
• Browser: Firefox
• Version: 84.0.2

Demo link

https://codesandbox.io/s/vibrant-visvesvaraya-mt574

[miguelrincon]

Thanks, we are experiencing this problem when upgrading vue-router from 3.4.9 to 3.5.1, these warnings show up in our jest run:

FAIL spec/frontend/monitoring/router_spec.js
  ● Monitoring router › support legacy URLs with full dashboard path to visit dashboard page › "/dashboard.yml" renders page with dashboard "dashboard.yml"
    Unexpected call of console.error() with:
    [Vue warn]: Error in render: "Error: Unexpected call of console.warn() with:
    [vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link."
    found in
    ---> <RouterLink>
           <BLink>
             <BDropdownItem>
               <GlDropdownItem>
                 <BDropdown>
                   <GlDropdown>
                     <ActionsMenu>
                       <DashboardHeader>
                         <Dashboard>
                           <Anonymous>
                             <Anonymous>
                               <Root>
      at warn (node_modules/vue/dist/vue.runtime.common.dev.js:621:15)
      at logError (node_modules/vue/dist/vue.runtime.common.dev.js:1880:5)
      at globalHandleError (node_modules/vue/dist/vue.runtime.common.dev.js:1875:3)
      at handleError (node_modules/vue/dist/vue.runtime.common.dev.js:1835:5)
      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3540:7)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:21)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
      at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)

See: https://gitlab.com/gitlab-org/gitlab/-/jobs/987471346#L1190

This is the related code in b-link that uses tag:

bootstrap-vue/src/components/link/link.js

Line 108 in 5bf6733

tag: this.routerTag

EDIT: Cross-linking my comment at https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52505#note_495967942

[jacobmllr95]

I've created a CodeSandbox that reproduces the issue:
https://codesandbox.io/s/vibrant-visvesvaraya-mt574

[archieDeveloper]

@jackmu95 When is the patch release?

[Jorden-]

I still have the exact same warnings, yet if I read this correctly it should've already been patched?

Running:
Bootstrap: 4.6.1
Bootstrap-vue 2.21.2
vue-router: 3.5.3
vue 2.6.14

[codetheorist]

There hasn't been a release since 2.21.2 was released on the 1 Jan 2021.

The project for 2.22.0 progress in the right sidebar shows how close a release of 2.22.0 we are, which isn't a million miles away.

2.22.0 is the release that will contain the fixes for this bug.

[lipecss]

im still getting this same alert

[raulfortes]

im still getting this same alert

[mhuseynli]

Answer is a little bit late, but this problem still exists.
So, the best way I found to solve this is just replacing <b-dropdown-item> with <li> tag and put <nuxt-link class="dropdown-item"> inside it, as shown example below:

<b-dropdown>
  <li role="presentation">
      <nuxt-link to="your page" class="dropdown item">Your page name</nuxt-link>
  </li>
</b-dropdown>