JS.VUE.COMPONENT.DEFINITION.NAME.CASING
Enforce specific casing for component definition name
Define a style for component definition name casing for consistency purposes.
Rule Details
This rule aims to warn the component definition names other than the configured casing.
Options
Default casing is set to PascalCase.
Copy
{
"vue/component-definition-name-casing": ["error", "PascalCase" | "kebab-case"]
}
"PascalCase"(default) ... enforce component definition names to pascal case."kebab-case"... enforce component definition names to kebab case.
"PascalCase" (default)
{'vue/component-definition-name-casing': ['error']}
Copy
<script>
export default {
/* GOOD */
name: 'MyComponent'
}
</script>
{'vue/component-definition-name-casing': ['error']}
Copy
<script>
export default {
/* BAD */
name: 'my-component'
}
</script>
{'vue/component-definition-name-casing': ['error']}
Copy
/* GOOD */
Vue.component('MyComponent', {
})
/* BAD */
Vue.component('my-component', {
})
"kebab-case"
{'vue/component-definition-name-casing': ['error', 'kebab-case']}
Copy
<script>
export default {
/* GOOD */
name: 'my-component'
}
</script>
{'vue/component-definition-name-casing': ['error', 'kebab-case']}
Copy
<script>
export default {
/* BAD */
name: 'MyComponent'
}
</script>
{'vue/component-definition-name-casing': ['error', 'kebab-case']}
Copy
/* GOOD */
Vue.component('my-component', {
})
/* BAD */
Vue.component('MyComponent', {
})
Further Reading
- Style guide - Component name casing in JS/JSX (https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-js-jsx)