Recently, I encountered a headache when I was developing, the component I used before did not have any problems, but I had a problem when I referenced it in other directories.
The name of the component and the path to import were fine, but after reading other people’s problems and the official documentation about the specification of the component name attribute, it was because the component name was not filled in properly!
When naming components must be in accordance with the specifications given in the official documentation.
1. Using kebab-case
Vue.component('my-component-name', { /* ... */ })When defining a component using kebab-case (short horizontal separator naming), you must also use kebab-case when referencing this custom element, example <my-component-name>
2. Using PascalCase
Vue.component('MyComponentName', { /* ... */ })When defining a component using PascalCase (initial capitalization naming), it is acceptable to use either <my-component-name> or <MyComponentName> when you reference this custom element.
