enforce valid template root (vue/valid-template-root)

⚙️ This rule is included in all of "plugin:vue/essential", "plugin:vue/strongly-recommended" and "plugin:vue/recommended".

This rule checks whether every template root is valid.

📖 Rule Details

This rule reports the template root in the following cases:

The root is nothing. E.g. <template></template>.
The root is text. E.g. <template>hello</template>.
The root is multiple elements. E.g. <template><div>one</div><div>two</div></template>.
The root element has v-for directives. E.g. <template><div v-for="x in list">{{x}}</div></template>.
The root element is <template> or <slot> elements. E.g. <template><template>hello</template></template>.

👎 Examples of incorrect code for this rule:

template: ''

<template>
</template>

template: `
  <div>hello</div>
  <div>hello</div>
`

<template>
  <div>hello</div>
  <div>hello</div>
</template>

template: 'abc'

<template>
  abc
</template>

template: '<div v-for="item in items"/>'

<template>
  <div v-for="item in items"/>
</template>

👍 Examples of correct code for this rule:

template: '<div>abc</div>'

<template>
  <div>abc</div>
</template>

template: '<div v-if="foo">abc</div>'

<template>
  <div v-if="foo">abc</div>
</template>

template: `
  <div v-if="foo">abc</div>
  <div v-else>def</div>
`

<template>
  <div v-if="foo">abc</div>
  <div v-else>def</div>
</template>

Nothing.