no-useless-template-attributes.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-useless-template-attributes	disallow useless attribute on `<template>`	v7.19.0

vue/no-useless-template-attributes

disallow useless attribute on <template>

• ⚙️ This rule is included in all of "plugin:vue/essential", *.configs["flat/essential"], "plugin:vue/vue2-essential", *.configs["flat/vue2-essential"], "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue2-strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/recommended", *.configs["flat/recommended"], "plugin:vue/vue2-recommended" and *.configs["flat/vue2-recommended"].

📖 Rule Details

This rule to prevent any useless attribute on <template> tags.

<template>
  <!-- ✓ GOOD -->
  <template v-if="foo">...</template>
  <template v-if="foo">...</template>
  <template v-else-if="foo">...</template>
  <template v-else>...</template>
  <template v-for="i in foo" :key="i">...</template>
  <template v-slot:foo>...</template>
  <!-- for Vue<=2.5 -->
  <template slot="foo">...</template>
  <template :slot="foo">...</template>
  <template slot-scope="param">...</template>
  <!-- for Vue<=2.4 -->
  <template scope="param">...</template>

  <!-- ✗ BAD -->
  <template v-if="foo" class="heading">...</template>
  <template v-for="i in foo" :bar="i">...</template>
  <template v-slot:foo="foo" ref="input">...</template>
  <template v-if="foo" @click="click">...</template>

  <!-- Ignore -->
  <template class="heading">...</template>
  <template :bar="i">...</template>
  <template ref="input">...</template>
  <template @click="click">...</template>
</template>

🔧 Options

Nothing.

👫 Related Rules

• vue/no-lone-template

🚀 Version

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

🔍 Implementation

• Rule source
• Test source