noVueDeprecatedRouterLinkTagProp (HTML)

Language HTML

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueDeprecatedRouterLinkTagProp
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-router-link-tag-prop

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueDeprecatedRouterLinkTagProp": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the tag prop on RouterLink.

Vue Router 4, the version of Vue Router for Vue 3, doesn’t support the tag prop on <RouterLink>. Writing <RouterLink tag="li"> doesn’t render an <li> element: the prop is ignored, and the link still renders as an <a> element.

To render a different element, add the custom prop and put your own element in the link’s default slot. The slot gives you a navigate function to call when the element is clicked:

1
<template>
2
  <RouterLink to="/" custom v-slot="{ navigate }">
3
    <li role="link" @click="navigate">Home</li>
4
  </RouterLink>
5
</template>

This rule checks <RouterLink> and <router-link>. Use the components option to check other link components.

Examples

Invalid

1
<template>
2
  <RouterLink tag="li" to="/">Home</RouterLink>
3
</template>

code-block.vue:2:15 lint/nursery/noVueDeprecatedRouterLinkTagProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The tag prop is used on RouterLink.
  
    1 │ <template>
  > 2 │   <RouterLink tag="li" to="/">Home</RouterLink>
      │               ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue Router 4 doesn't support this prop, so it's ignored and the link still renders as an <a> element.
  
  ℹ To render a different element, add the custom prop and put the element in the link's default slot.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <router-link :tag="element" to="/">Home</router-link>
3
</template>

code-block.vue:2:16 lint/nursery/noVueDeprecatedRouterLinkTagProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The tag prop is used on router-link.
  
    1 │ <template>
  > 2 │   <router-link :tag="element" to="/">Home</router-link>
      │                ^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue Router 4 doesn't support this prop, so it's ignored and the link still renders as an <a> element.
  
  ℹ To render a different element, add the custom prop and put the element in the link's default slot.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<template>
2
  <RouterLink to="/">Home</RouterLink>
3
  <router-link to="/">
4
    <div>Home</div>
5
  </router-link>
6
  <NuxtLink tag="li" to="/">Home</NuxtLink>
7
</template>

Options

`components`

Default: ["RouterLink"]

The names of the link components to check. Each name matches both its PascalCase and kebab-case spelling, so "NuxtLink" matches <NuxtLink> and <nuxt-link>. Setting this option replaces the default list, so include "RouterLink" to keep checking it.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueDeprecatedRouterLinkTagProp": {
6
          "level": "on",
7
          "options": {
8
            "components": [
9
              "RouterLink",
10
              "NuxtLink"
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

1
<template>
2
  <nuxt-link tag="li" to="/">Home</nuxt-link>
3
</template>

code-block.vue:2:14 lint/nursery/noVueDeprecatedRouterLinkTagProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The tag prop is used on nuxt-link.
  
    1 │ <template>
  > 2 │   <nuxt-link tag="li" to="/">Home</nuxt-link>
      │              ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue Router 4 doesn't support this prop, so it's ignored and the link still renders as an <a> element.
  
  ℹ To render a different element, add the custom prop and put the element in the link's default slot.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <NuxtLink to="/">Home</NuxtLink>
3
</template>