# vue/no-lone-template

disallow unnecessary <template>

  • ⚙️ This rule is included in "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

# 📖 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.

<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>
Now loading...

# 🔧 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

<template> <!-- ✓ GOOD --> <template ref="foo">...</template> <template id="bar">...</template> <!-- ✗ BAD --> <template class="baz">...</template> </template>
Now loading...

# 🔇 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.

# 🔍 Implementation