Regarding the "Use multi-word component names" rule.

[noahgregory-basis]

I understand this has probably been asked so many times, but the "Use multi-word component names" rule just confuses me. The description of the rule reads:

User component names should always be multi-word, except for root App components. This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.

The words "prevents conflicts" link to the HTML spec, but the section it links to says nothing about element names being single words. In fact, the section only refers to custom elements, so even if it did say that the names have to be a single word, it would really only be for custom elements and provide no guarantee that any new HTML elements would follow those rules. It would be a good sign, but not a guarantee. Yes, most (if not all, save for arguably textarea) of commonly used HTML elements are a single word, there's no guarantee this will be the case going forward.

The conflicts in question also only arise of components are being used in their lowercase form (HTML templates). Using the uppercase form (SFC templates) completely eliminates the possibility of conflicts. I'm not sure what the breakdown is of what Vue developers use what kind of templates, but calling a pattern "essential" (as per the title of the section it is in) to avoid conflicts that only happen in certain usecases feels a bit overly regimented, in my opinion.

So not only is the claimed justification for the rule actually not the case, but it also is meant to solve conflicts that only exist in certain usecases.

I don't think it's a bad rule for those usecases, but to call it "essential" is too much (again, in my opinion). Am I missing something? I could be misreading the HTML spec, but I really cannot see how the linked section enforces anything about the number of words in an element name.

[Christoph-Harms]

I think the important sentence here is in the second "Notes" section:

They contain a hyphen, used for namespacing and to ensure forward compatibility (since no elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the future).

I read that as: "If you create a custom element, it has to contain a hyphen (i.e. consist of two words), because no elements will ever be added to HTML, SVG, or MathML that contain a hyphen (i.e. only single word elements will ever be added to HTML, SVG, or MathML)".

[Jinjiang]

It would still be a conflict when you use uppercase name in-DOM template. e.g. <H1> and <h1> in DOM is the same thing. Even using <App> might be a problem one day in my personal opinion. So I personally suggest using single word component name with caution.

BTW, the style guide page you mentioned is actually not actively maintained. There is no link from the homepage to it. Not sure how you found it. 😅

Thanks.

[noahgregory-basis]

BTW, the style guide page you mentioned is actually not actively maintained. There is no link from the homepage to it. Not sure how you found it. 😅

I was browsing through the VueJS ESLint plugin and found the associated rule. I found the Vue 2 style guide and then the Vue 3 style guide. If the ESLint plugin is based off of rules from a style guide that is no longer being maintained, should that be revisited?

[Jinjiang]

I think it should. Good point.
/cc @sodatea shall we?

[haoqunjiang]

It's planned for the next major version of eslint-plugin-vue: vuejs/eslint-plugin-vue#1951