Rename all single-word components
Vue's linting rules now includes a vue/multi-word-component-names
rule, deemed essential (highest priority), on both Vue 2 and Vue 3. This rule requires that all components must have names that use multiple words within templates. For example, this very common pattern in the frontend is now forbidden:
<Paginator :response="response" v-slot="{ results }" :loading="loading">
<table>
<!-- ... -->
<tbody>
<Row v-for="result in results" :key="result.id" :result="result" />
</tbody>
</Paginator>
Paginator
and Row
now are forbidden component names, because the WHATWG could decide tomorrow that <paginator>
and <row>
now are valid HTML tags in the HTML Living Standard.
A similar situation occurred recently with the introduction of Web Components, basically Vue.js but native, which uses <template>
and <slot>
, two tags that are used by Vue itself, so this isn't like this could never happen.