multi-word-component-names.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/multi-word-component-names	require component names to be always multi-word	v7.20.0

vue/multi-word-component-names

require component names to be always multi-word

• ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

📖 Rule Details

This rule require component names to be always multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component>. This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.

/* ✓ GOOD */
Vue.component('todo-item', {
  // ...
})

/* ✗ BAD */
Vue.component('Todo', {
  // ...
})

<script>
/* ✓ GOOD */
export default {
  name: 'TodoItem',
  // ...
}
</script>

<script>
/* ✗ BAD */
export default {
  name: 'Todo',
  // ...
}
</script>

<script>
/* ✗ BAD */
export default {
  // ...
}
</script>

🔧 Options

Nothing.

📚 Further Reading

• Style guide - Multi-word component names

🚀 Version

This rule was introduced in eslint-plugin-vue v7.20.0

🔍 Implementation

• Rule source
• Test source