enforce specific casing for the component naming style in template (vue/component-name-in-template-casing)

🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Define a style for the component name in template casing for consistency purposes.

📖 Rule Details

👍 Examples of correct code for PascalCase:

<template>
  <TheComponent />
</template>

👎 Examples of incorrect code for PascalCase:

<template>
  <the-component />
  <theComponent />
  <The-component />
</template>

👍 Examples of correct code for kebab-case:

<template>
  <the-component />
</template>

👎 Examples of incorrect code for kebab-case:

<template>
  <TheComponent />
  <theComponent />
  <Thecomponent />
  <The-component />
</template>

Default casing is set to PascalCase.

  "vue/component-name-in-template-casing": ["error",
    "PascalCase|kebab-case",
    {
      "ignores": []
    }
  ]

ignores (string[]) ... The element name to ignore. Sets the element name to allow. For example, a custom element or a non-Vue component.

👍 Examples of correct code for {ignores: ["custom-element"]}:

<template>
  <custom-element></custom-element>
  <TheComponent/>
</template>