vue/component-name-in-template-casing
enforce specific casing for the component naming style in template
- ⚙️ This rule is included in
"plugin:vue/strongly-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption 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
This rule aims to warn the tag names other than the configured casing in Vue.js template.
🔧 Options
{
"vue/component-name-in-template-casing": ["error", "PascalCase" | "kebab-case", {
"ignores": []
}]
}
"PascalCase"(default) ... enforce tag names to pascal case. E.g.<CoolComponent>. This is consistent with the JSX practice."kebab-case"... enforce tag names to kebab case: E.g.<cool-component>. This is consistent with the HTML practice which is case-insensitive originally.ignores(string[]) ... The element names to ignore. Sets the element name to allow. For example, a custom element or a non-Vue component.
"PascalCase"
<template>
<!-- ✓ GOOD -->
<TheComponent />
<!-- ✗ BAD -->
<the-component />
<theComponent />
<The-component />
</template>
"kebab-case"
<template>
<!-- ✓ GOOD -->
<the-component />
<!-- ✗ BAD -->
<TheComponent />
<theComponent />
<Thecomponent />
<The-component />
</template>
"PascalCase", { ignores: ["custom-element"] }
<template>
<!-- ✓ GOOD -->
<TheComponent/>
<custom-element></custom-element>
<!-- ✗ BAD -->
<magic-element></magic-element>
</template>