Skip to content

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.