pageClass | sidebarDepth | title | description |
---|---|---|---|
rule-details |
0 |
vue/component-options-name-casing |
enforce the casing of component name in `components` options |
enforce the casing of component name in
components
options
- ❗ This rule has not been released yet.
- 🔧 The
--fix
option on the command line can automatically fix some of the problems reported by this rule.
This rule aims to enforce casing of the component names in components
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>
<script>
export default {
/* ✓ GOOD */
components: {
AppHeader,
AppSidebar
}
}
</script>
<script>
export default {
/* ✗ BAD */
components: {
appHeader,
'app-sidebar': AppSidebar
}
}
</script>
<script>
export default {
/* ✓ GOOD */
components: {
'app-header': AppHeader,
'app-sidebar': appSidebar
}
}
</script>
<script>
export default {
/* ✗ BAD */
components: {
AppHeader,
appSidebar
}
}
</script>
<script>
export default {
/* ✓ GOOD */
components: {
appHeader,
appSidebar
}
}
</script>
<script>
export default {
/* ✗ BAD */
components: {
AppHeader,
'app-sidebar': appSidebar
}
}
</script>