JS.VUE.NO.DEPRECATED.ROUTER.LINK.TAG.PROP
Deprecated the `tag` attribute on `RouterLink` elements
Rule Details
This rule reports deprecated the tag attribute on RouterLink elements (removed in Vue.js v3.0.0+).
{'vue/no-deprecated-router-link-tag-prop': ['error']}
Copy
<template>
<!-- GOOD -->
<RouterLink to="/">Home</RouterLink>
<router-link to="/">Home</router-link>
<RouterLink to="/">
<div>Home</div>
</RouterLink>
<router-link to="/">
<div>Home</div>
</router-link>
<NuxtLink tag="div" to="/">Home</NuxtLink>
<nuxt-link tag="div" to="/">Home</nuxt-link>
<!-- BAD -->
<RouterLink tag="div" to="/">Home</RouterLink>
<router-link tag="div" to="/">Home</router-link>
<RouterLink :tag="someVariable" to="/">Home</RouterLink>
<router-link :tag="someVariable" to="/">Home</router-link>
</template>
Options
Copy
{
"vue/no-deprecated-router-link-tag-prop": ["error", {
"components": ['RouterLink']
}]
}
components(string[]) ... Component names which will be checked with thetagattribute. default['RouterLink'].
Note: this rule will check both kebab-case and PascalCase versions of the
given component names.
{ "components": ['RouterLink', 'NuxtLink'] }
{'vue/no-deprecated-router-link-tag-prop': ['error', {'components': ['RouterLink', 'NuxtLink']}]}
Copy
<template>
<!-- BAD -->
<RouterLink tag="div" to="/">Home</RouterLink>
<router-link tag="div" to="/">Home</router-link>
<RouterLink :tag="someVariable" to="/">Home</RouterLink>
<router-link :tag="someVariable" to="/">Home</router-link>
<NuxtLink tag="div" to="/">Home</NuxtLink>
<nuxt-link tag="div" to="/">Home</nuxt-link>
<NuxtLink :tag="someVariable" to="/">Home</NuxtLink>
<nuxt-link :tag="someVariable" to="/">Home</nuxt-link>
</template>
Further Reading
- Vue RFCs - 0021-router-link-scoped-slot (https://github.com/vuejs/rfcs/blob/master/active-rfcs/0021-router-link-scoped-slot.md)
