noVueRootVIf (HTML)

Language HTML

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noVueRootVIf
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-root-v-if

How to configure

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

Description

Disallow v-if on the root element of a Vue component template.

When the only root element of a template has a v-if and no v-else, that element disappears whenever the condition is false. Making the component conditional is clearer in the parent component, by putting the v-if where the component is used.

Examples

Invalid

1
<template>
2
  <div v-if="visible">Content</div>
3
</template>

code-block.vue:2:8 lint/nursery/noVueRootVIf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The root element of this template is conditionally rendered with v-if.
  
    1 │ <template>
  > 2 │   <div v-if="visible">Content</div>
      │        ^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ When the condition is false, the root element disappears, which hides the condition from the parent component.
  
  ℹ Move the v-if to the parent component where this component is used, or add a v-else branch.
  
  ℹ 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
  <div v-if="visible">Content</div>
3
  <div v-else>Fallback</div>
4
</template>