# vue/name-property-casing
enforce specific casing for the name property in Vue components
- ⚠️ This rule was deprecated and replaced by vue/component-definition-name-casing rule.
- 🔧 The
--fixoption on the command line (opens new window) can automatically fix some of the problems reported by this rule.
# 📖 Rule Details
This rule aims at enforcing the style for the name property casing for consistency purposes.
<script>
/* ✓ GOOD */
export default {
name: 'MyComponent'
}
</script>
<script>
/* ✗ BAD */
export default {
name: 'my-component'
}
</script>
# 🔧 Options
{
"vue/name-property-casing": ["error", "PascalCase" | "kebab-case"]
}
"PascalCase"(default) ... Enforce thenameproperty to Pascal case."kebab-case"... Enforce thenameproperty to kebab case.
# "kebab-case"
<script>
/* ✓ GOOD */
export default {
name: 'my-component'
}
</script>
<script>
/* ✗ BAD */
export default {
name: 'MyComponent'
}
</script>
# 📚 Further Reading
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.8.0