useVueValidTemplateRoot (HTML)

Language HTML

Summary

Rule available since: v2.3.11
Diagnostic Category: lint/correctness/useVueValidTemplateRoot
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/valid-template-root

How to configure

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

Description

Enforce valid Vue <template> root usage.

This rule reports only root-level <template> elements. If the <template> has a src attribute, the element must be empty. Otherwise, the element must contain content.

Examples

Invalid

1
<template src="./foo.html">content</template>

code-block.vue:1:1 lint/correctness/useVueValidTemplateRoot  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The root `<template>` with a src attribute must be empty.
  
  > 1 │ <template src="./foo.html">content</template>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The src attribute indicates that the content is loaded from an external file.
  
  ℹ Remove content when using the src attribute.
  
  ℹ Unsafe fix: Remove inline content from `<template>`.
  
    1 │ <template·src="./foo.html">content</template>
      │                            -------

1
<template></template>

code-block.vue:1:1 lint/correctness/useVueValidTemplateRoot ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The root `<template>` is empty.
  
  > 1 │ <template></template>
      │ ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The root `<template>` must contain content when no src attribute is present.
  
  ℹ Add content inside the `<template>` or use the src attribute.

Valid

1
<template>content</template>

1
<template src="./foo.html"></template>