Skip to content

Full-word Component Names

Checks if the component name is a full word. As this is not easy to detect programatically we jsu check if the name has less then 3 consonants   
👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#full-word-component-names

❓ Why it's good to follow this rule?

  • Readability: Full-word component names are easier to read and understand.
  • Consistency: Full-word component names are consistent with the naming of files and folders.

😱 Examples of code for which this rule will throw a warning

WARNING

The following code uses a component name that does not qualify as a full word because it contains fewer than three consonants. This is not in line with best practices for component naming.

vue
<template>
  <NavG>
    <!-- Navigation items -->
  </NavG>
</template>

🤩 How to fix it?

TIP

Refactor the component name to use a full word, ensuring it contains at least three consonants for clarity and better readability:

vue
<template>
  <Navigation>
    <!-- Navigation items -->
  </Navigation>
</template>