`vue/component-name-in-template-casing`: ignore `<component>` built-in element

[johannschopplich]

What rule do you want to change?

• vue/component-name-in-template-casing

Does this change cause the rule to produce more or fewer warnings?

It will provide one fewer warning/error, because it will handle an edge-case.

How will the change be implemented? (New option, new default behavior, etc.)?

The change will treat <component> as an element, not a component.

The vue/component-name-in-template-casing rule enforces pascal-cased component names. This will also enforce <component> to be written as <Component>, which is not correct. Technically, <component> is not a component, but an element.

Please provide some example code that this change will affect:

The following code will be valid:

<template>
  <component is="div" />
</template>

What does the rule currently do for this code?

It will enforce <component> to be pascal-cased as <Component>:

<template>
  <Component is="div" />
</template>

What will the rule do after it's changed?

• Keep <component> as-is.

Additional context

As the Vue docs state:

Note

<component>, <slot> and <template> are component-like features and part of the template syntax. They are not true components and are compiled away during template compilation. As such, they are conventionally written with lowercase in templates.

The issue came up working with @antfu/eslint-config.
Related PR:

• fix(vue): no pascal case for <component> built-in element antfu/eslint-config#291