Vue

`vue/multi-word-names`

Name components with two or more words (TodoItem, not Item); App, pages and layouts are exempt.

minorstaticfe-vue

Why

HTML element names are single words, and new ones keep being added (<search> arrived in 2023). A component called Header, Button or Dialog is written <header>, <button> or <dialog> in in-DOM templates and kebab-case, where it is the native element, and a name like Item says nothing about what it is.

Fix

Rename the file and its uses to two or more words: AppHeader.vue, BaseButton.vue, TodoItem.vue. A common prefix (App, Base, The) groups app-wide components. Route views (pages/, views/), layouts and the root App.vue are not used as tags and need no change.

Examples

bad:  components/Header.vue   components/Item.vue
good: components/AppHeader.vue   components/TodoItem.vue

Sources

Facts

Id: vue/multi-word-names
Severity: minor
Check: static checked in the source by audit
Applies to: project
Only in projects with: vue nuxt
Taught by the skill: fe-vue Vue components
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/multi-word-names