Vue.js components capitalized
It's just a convention to differentiate between the component constructor/definition (capitalised) and the component instances.
It's a common convention that classes are capitalised but instances of a class are not:
const user = new User()
From what I have seen and used, vuejs doesn't mind your component files', component names' case.
Example:
// HelloWorld.vue
export default {
data () {
return {
msg: 'Hello'
}
}
}
if used in say App.vue like:
//App.vue
<template>
<HelloWorld></HelloWorld>
<hello-world><hello-world>
</template>
import HelloWorld from 'path/to/HelloWorld' //adding .vue is optional
export default {
components: {
HelloWorld
}
}
There would be absolutely no negative consequences, vuejs doesn't enforce W3C standards
Note that Vue does not enforce the W3C rules for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.
source
So you can use an imported component in kebab-case or camelCase vuejs internally checks for it and would render the component the same way.