# vue/component-name-in-template-casing
enforce specific casing for the component naming style in template
- 🔧 The
--fixoption on the command line (opens new window) 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", {
"registeredComponentsOnly": true,
"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.registeredComponentsOnly... Iftrue, only registered components (in PascalCase) are checked. Iffalse, check all. defaulttrueignores(string[]) ... The element names to ignore. Sets the element name to allow. For example, custom elements or Vue components with special name. You can set the regexp by writing it like"/^name/".
# "PascalCase", { registeredComponentsOnly: true } (default)
<template>
<!-- ✓ GOOD -->
<CoolComponent />
<!-- ✗ BAD -->
<cool-component />
<coolComponent />
<Cool-component />
<!-- ignore -->
<UnregisteredComponent />
<unregistered-component />
<registered-in-kebab-case />
<registeredInCamelCase />
</template>
<script>
export default {
components: {
CoolComponent,
'registered-in-kebab-case': VueComponent1,
'registeredInCamelCase': VueComponent2
}
}
</script>
# "kebab-case"
<template>
<!-- ✓ GOOD -->
<cool-component />
<!-- ✗ BAD -->
<CoolComponent />
<coolComponent />
<Cool-component />
<!-- ignore -->
<unregistered-component />
<UnregisteredComponent />
</template>
<script>
export default {
components: {
CoolComponent
}
}
</script>
# "PascalCase", { registeredComponentsOnly: false }
<template>
<!-- ✓ GOOD -->
<CoolComponent />
<UnregisteredComponent />
<!-- ✗ BAD -->
<cool-component />
<unregistered-component />
</template>
<script>
export default {
components: {
CoolComponent
}
}
</script>
# "PascalCase", { ignores: ["/^custom-/"], registeredComponentsOnly: false }
<template>
<!-- ✓ GOOD -->
<CoolComponent/>
<custom-element></custom-element>
<custom-button></custom-button>
<custom-input />
<!-- ✗ BAD -->
<magic-element></magic-element>
</template>
# 📚 Further Reading
# 🚀 Version
This rule was introduced in eslint-plugin-vue v5.0.0