disallow attributes on <template>

[privatenumber]

Please describe what the rule should do:

Rule to prevent any attribute on <template> tags.

I think it makes sense that the only thing that should be allowed are some directives (eg. v-if, v-for, v-slot) but not v-bind or v-on. And with the exception of legacy API like slot="...".

What category should the rule belong to?

[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
	<div>
		<template class="heading">
			<h1>Hello world</h1>
		</template>
	</div>
</template>

<template>
	<div>
		<template ref="input">
			<input type="text">
		</template>
	</div>
</template>

Additional context

I noticed there were mistakes in Vue code where people would accidentally leave class="...", ref="...", etc. on <template> tags.

These fail silently so it's easy to go unnoticed.

[ota-meshi]

Thank you for the rule proposal!

I like that rule, but I think we need to clarify the vue/no-lone-template rule and its role.
https://eslint.vuejs.org/rules/no-lone-template.html

I think new rule should only be reported if <template> with effective directives such as v-if has unnecessary attributes.

e.g.

<!-- ✗ 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>

<!-- ✓ 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>

<!-- Ignore: The `vue/no-lone-template` rule has already checked. -->
<template class="heading">...</template>
<template :bar="i">...</template>
<template ref="input">...</template>
<template @click="click">...</template>

I think the rule name will be something like vue/no-useless-template-attributes.

[privatenumber]

Excellent! That behavior sounds good to me.

Do you think it's worth considering cases where vue/no-lone-template is disabled?

[ota-meshi]

Do you think it's worth considering cases where vue/no-lone-template is disabled?

I think maybe it's not worth considering.

If vue/no-lone-template is disabled in Vue3, the user may have intentionally drawn the <template> element. The attribute works when draw the <template> element. (But I can't find a case where it's useful 😅 )

[privatenumber]

Thank you @ota-meshi! 🙌