eslint-plugin-vue

Appearance

vue/no-lone-template ​

disallow unnecessary <template>

  • ⚙️ This rule is included in all of "plugin:vue/vue3-recommended", *.configs["flat/recommended"], "plugin:vue/recommended" and *.configs["flat/vue2-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.

Now loading...

🔧 Options ​

json
{
  "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 ​

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.

🚀 Version ​

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation ​