JS.VUE.NO.LONE.TEMPLATE

Rule Details

This rule aims to eliminate unnecessary and potentially confusing <template>.
In Vue.js 2.x, the <template> elements that have no specific directives have no effect.
In Vue.js 3.x, the <template> elements that have no specific directives render the <template> elements as is, but in most cases this may not be what you intended.

{'vue/no-lone-template': ['error']}

<template>
  <!-- GOOD -->
  <template v-if="foo">...</template>
  <template v-else-if="bar">...</template>
  <template v-else>...</template>
  <template v-for="e in list">...</template>
  <template v-slot>...</template>

  <!-- BAD -->
  <template>...</template>
  <template/>
</template>

Options

{
  "vue/no-lone-template": ["error", {
    "ignoreAccessible": false
  }]
}

• ignoreAccessible ... If true, ignore accessible <template> elements. default false.
  Note: this option is useless if you are using Vue.js 2.x.

"ignoreAccessible": true

{'vue/no-lone-template': ['error', { 'ignoreAccessible': true }]}

<template>
  <!-- GOOD -->
  <template ref="foo">...</template>
  <template id="bar">...</template>

  <!-- BAD -->
  <template class="baz">...</template>
</template>

When Not To Use It

If you are using Vue.js 3.x and want to define the <template> element intentionally, you will have to turn this rule off or use "ignoreAccessible" option.