warning in vue-router 3.5.1: <router-link>'s tag prop is deprecated and has been removed in Vue Router 4

Question

Since I updated our Vue.js app's node packages, I get the following warning in the browser console:

[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.esm.js:16

The info is pretty straight-forward, sure, BUT:

At the one place, where <router-link> is in use, the deprecated tag prop is not even applied:

<router-link
    class="button-add"
    :to="{
        name: 'ItemEditorAdd',
        params: { parent_item_id: item.id },
    }"
    :id="'button-' + item.id"
>
    <i class="material-icons">add</i>
</router-link>

Furthermore, the installed vue-router package is not even in version 4 but in version 3, which correctly matches the installed vue.js in v2.6. The warning message gives me the impression, that the compatiblity checker assumes v4 is in use, though.

Excerpt from package.json:

"vue": "^2.6.12",
"vue-class-component": "^7.2.6",
"vue-cookies-ts": "^1.5.19",
"vue-i18n": "^8.24.4",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"vuex-class": "^0.3.2",
"vuex-oidc": "^3.10.2"

I am confused, and I couldn't find a solution here in StackOverflow or in vue-router Github issues.
Is this warning not fixable, but just a constant reminder to mind this when upgrading sometime in the future?? If so, why does it not check if tag prop is really used - seems a bit spammy..

UPDATE
The problem also occurs in vue-router v3.5.2.
There is a GitHub vue-router issue (closed) and a Github boostrap-vue issue (open).

Btw: issues can only be created here: new-issue.vuejs.org But a new issue is only accepted, if you provide a "link to minimal reproduction": "If it is a Vue 2 bug or cannot be reproduced in the playground, you can use CodePen, CodeSandbox or provide a GitHub repo." No thanks! — jasie

Bhojendra Rauniyar Bhojendra Rauniyar · Accepted Answer · 2021-05-14T08:57:27

I just checked their code and they are having a default value for tag:

tag: {
      type: String,
      default: 'a'
    },

And checking if tag, show warning. This is ridiculous, you have to wait until they remove it.

if ('tag' in this.$options.propsData && !warnedTagProp) {
        warn(
          false,
          `<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.`
        )
        warnedTagProp = true
      }

To solve it, you must follow this: https://next.router.vuejs.org/guide/migration/#removal-of-append-prop-in-router-link

<router-link
    class="button-add"
    :to="{
        name: 'ItemEditorAdd',
        params: { parent_item_id: item.id },
    }"
    :id="'button-' + item.id"
    custom
    :slot="{ navigate }"
>
    <i class="material-icons" @click="navigate" @keypress.enter="navigate" role="link">add</i>
</router-link>

I'm still not 100% sure if this stops throwing warning because of their weird check having set a default value on their own. If you still get warning after applying the preceding code, then you don't need to worry about it as it's just warning and it's only shown in environment other than production.

warning in vue-router 3.5.1: <router-link>'s tag prop is deprecated and has been removed in Vue Router 4

2 Answers