noVueLoneTemplate (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueLoneTemplate
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-lone-template

How to configure

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

Description

Disallow <template> elements in a Vue template that don’t use v-if, v-else-if, v-else, v-for, or v-slot.

Inside a Vue template, a <template> element is an invisible wrapper only when it has one of these directives. Without one, Vue renders it as a regular HTML <template> element, and the browser doesn’t show its content on the page.

The <template> at the top level of a .vue file isn’t checked.

Examples

Invalid

1
<template>
2
  <template>
3
    <p>Hello</p>
4
  </template>
5
</template>

code-block.vue:2:3 lint/nursery/noVueLoneTemplate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <template> has no v-if, v-else-if, v-else, v-for, or v-slot directive.
  
    1 │ <template>
  > 2 │   <template>
      │   ^^^^^^^^^^
    3 │     <p>Hello</p>
    4 │   </template>
  
  ℹ Without one of these directives, Vue renders a regular HTML <template> element, and the browser doesn't show its content.
  
  ℹ Add the directive you meant to use, or remove the <template> tags and keep their content.
  
  ℹ 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
  <template class="greeting">
3
    <p>Hello</p>
4
  </template>
5
</template>

code-block.vue:2:3 lint/nursery/noVueLoneTemplate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <template> has no v-if, v-else-if, v-else, v-for, or v-slot directive.
  
    1 │ <template>
  > 2 │   <template class="greeting">
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │     <p>Hello</p>
    4 │   </template>
  
  ℹ Without one of these directives, Vue renders a regular HTML <template> element, and the browser doesn't show its content.
  
  ℹ Add the directive you meant to use, or remove the <template> tags and keep their content.
  
  ℹ 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
  <template v-if="visible">
3
    <p>Hello</p>
4
  </template>
5
  <template v-else>
6
    <p>Goodbye</p>
7
  </template>
8
  <template v-for="item in items">
9
    <p>{{ item }}</p>
10
  </template>
11
  <MyList>
12
    <template #item>
13
      <p>Item</p>
14
    </template>
15
  </MyList>
16
</template>

Options

`ignoreAccessible`

Default: false

When true, a <template> without one of these directives is allowed if it has an id or ref attribute, written plainly or bound with v-bind. Use this when your code reads the <template> element on purpose, for example to copy its content.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueLoneTemplate": {
6
          "level": "on",
7
          "options": {
8
            "ignoreAccessible": true
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
<template>
2
  <template class="row">
3
    <p>Cell</p>
4
  </template>
5
</template>

code-block.vue:2:3 lint/nursery/noVueLoneTemplate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <template> has no v-if, v-else-if, v-else, v-for, or v-slot directive.
  
    1 │ <template>
  > 2 │   <template class="row">
      │   ^^^^^^^^^^^^^^^^^^^^^^
    3 │     <p>Cell</p>
    4 │   </template>
  
  ℹ Without one of these directives, Vue renders a regular HTML <template> element, and the browser doesn't show its content.
  
  ℹ Add the directive you meant to use, or remove the <template> tags and keep their content.
  
  ℹ 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
  <template id="row">
3
    <p>Cell</p>
4
  </template>
5
  <template ref="rowTemplate">
6
    <p>Cell</p>
7
  </template>
8
</template>

noVueLoneTemplate (HTML)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

ignoreAccessible

Invalid

Valid

Related links

`ignoreAccessible`