multi-word-component-names.md

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

vue/multi-word-component-names

require component names to be always multi-word

• ❗ This rule has not been released yet.

📖 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

🔍 Implementation

• Rule source
• Test source