Adjust or remove `multi-word-component-names` from `vue3-essential` config

[haoqunjiang]

The problem you want to solve.

I understand that the shared config is based on an outdated style guide and is intended to be deprecated in the future. But until we have a better alternative, I think it is still beneficial to update the config to reflect modern Vue.js practices.

This rule was included to "prevent conflicts with existing and future HTML elements, since all HTML elements are single words".

However, it is becoming increasingly annoying in modern Vue.js development. Now that file-based routing has become mainstream, many page components are single-word components, and that should be considered acceptable.

The popular shareable ESLint config @antfu/eslint-config disables this rule by default: https://github.com/antfu/eslint-config/blob/54241c17cf2fbc5652e7a5ceffa3786a85bb7866/src/configs/vue.ts#L143

@nuxt/eslint-config disables this rule for file-based routes: https://github.com/nuxt/eslint/blob/f852ae5c06910520d5f69891f5a16faa460e8bd0/packages/eslint-config/src/configs/disables.ts#L36

Many Vue projects on GitHub explicitly disable it as well: https://github.com/search?q=multi-word-component-names&type=code

Now that we have file-based routing support in vue-router v5, I am also considering disabling this rule for files under src/pages in create-vue templates. However, I would prefer a solution in the official config so that I do not have to override it in userland.

Your take on the correct solution to the problem.

The original goal to "prevent conflicts with existing and future HTML elements" can be achieved in other ways. In Vue 3, we encourage users to use PascalCase for Vue components and kebab-case for HTML elements. Only in-DOM template users would still need this rule to avoid conflicts.

I propose either adjusting the default exclusion patterns for this rule or removing it from the vue3-essential config. Personally, I am more inclined toward complete removal.

If we are to adjust the exclusion pattern, I suggest ignoring all files under the **/pages/ directory (vue-router and quasar use src/pages/, and nuxt uses app/pages/ for file-based routing).

Additional context

[ota-meshi]

Thank you for submitting the issue!

I think we probably need to revise the style guide as well.
(However, it may no longer be maintained now.)
https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names

Since our rule set follows the style guide, I'm a little hesitant to remove it, but I think if the style guide is changed, we can remove that rule from the rule set without needing to discuss it further.

[ota-meshi]

Commenting from personal preference, I think that rule shouldn't be included in the essential category. I'm not saying the rule is useless; it can be very useful depending on the rules of the user's project, but I don't think it's essential for everyone.

However, if we're going to follow a style guide, that rule should be included in the essential.