Vue component name must be lowercase?

Question

I am trying to use a component in my view file. The following doesn't work When I try to mount the component in my view with <CampaignCreate></CampaignCreate>

const app = new Vue({
    el: '#rewards-app',
    components: {
       CampaignCreate,
    }
});

If I change it to:

const app = new Vue({
    el: '#rewards-app',
    components: {
       'campaign-create': CampaignCreate,
    }
});

I can mount the component in my view file as <campaign-create></campaign-create> without a problem. I am trying to understand the reason behind this. I am currently on vuejs 2.x

Answer 1

In short, it's because HTML is case-insensitive. There was a big discussion in VueJS tracker opened 2 years ago by Evan You himself with the following reasoning:

So as we all know, HTML is case insensitive. myProp="123" gets parsed as myprop="123" and this has led to the caveat in Vue.js where you have to use my-prop="123" to refer to a prop declared in JavaScript as myProp. This bites beginners quite often.

The issue was eventually closed with decision to stay on the same track. Here's a telling quote:

Essentially, the problem exists because js and html are different technologies and use different naming systems. And using same case(kebab or camel) in both technologies will shift weirdness from one place to another but the underlying problem will persist So I believe, best we can do is draw a line. and the current line i,e. kebab case in html context and camelCase (and PascalCase) in js context is very good.