# vue/component-options-name-casing
enforce the casing of component name in
componentsoptions
- 🔧 The
--fixoption on the command line (opens new window) can automatically fix some of the problems reported by this rule. - 💡 Some problems reported by this rule are manually fixable by editor suggestions (opens new window).
# 📖 Rule Details
This rule aims to enforce casing of the component names in components options.
# 🔧 Options
{
"vue/component-options-name-casing": ["error", "PascalCase" | "kebab-case" | "camelCase"]
}
This rule has an option which can be one of these values:
"PascalCase"(default) ... enforce component names to pascal case."kebab-case"... enforce component names to kebab case."camelCase"... enforce component names to camel case.
Please note that if you use kebab case in components options,
you can only use kebab case in template;
and if you use camel case in components options,
you can't use pascal case in template.
For demonstration, the code example is invalid:
<template>
<div>
<!-- All are invalid. DO NOT use like these. -->
<KebabCase />
<kebabCase />
<CamelCase />
</div>
</template>
<script>
export default {
components: {
camelCase: MyComponent,
'kebab-case': MyComponent
}
}
</script>
# "PascalCase" (default)
<script>
export default {
/* ✓ GOOD */
components: {
AppHeader,
AppSidebar
}
}
</script>
<script>
export default {
/* ✗ BAD */
components: {
appHeader,
'app-sidebar': AppSidebar
}
}
</script>
# "kebab-case"
<script>
export default {
/* ✓ GOOD */
components: {
'app-header': AppHeader,
'app-sidebar': appSidebar
}
}
</script>
<script>
export default {
/* ✗ BAD */
components: {
AppHeader,
appSidebar
}
}
</script>
# "camelCase"
<script>
export default {
/* ✓ GOOD */
components: {
appHeader,
appSidebar
}
}
</script>
<script>
export default {
/* ✗ BAD */
components: {
AppHeader,
'app-sidebar': appSidebar
}
}
</script>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v8.2.0