vue/component-name-in-template-casing
enforce specific casing for the component naming style in template
- 🔧 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
This rule aims to warn the tag names other than the configured casing in Vue.js template.
🔧 Options
json
{
"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. defaulttrue
ignores
(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/"
.globals
(string[]
) ... Globally registered component names to check. For example,RouterView
andRouterLink
are globally registered byvue-router
and can't be detected as registered in a SFC file.
"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>
"PascalCase", { globals: ["RouterView"] }
<template>
<!-- ✓ GOOD -->
<RouterView></RouterView>
<!-- ✗ BAD -->
<router-view></router-view>
</template>
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v5.0.0