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>

<!-- filename: Todo.vue -->
<script>
/* ✗ BAD */
export default {
  // ...
}
</script>

🔧 Options

{
  "vue/multi-word-component-names": ["error", {
    "ignores": []
  }]
}

• ignores (string[]) ... The component names to ignore. Sets the component name to allow.

ignores: ["Todo"]

<script>
export default {
  /* ✓ GOOD */
  name: 'Todo'
}
</script>

<script>
export default {
  /* ✗ BAD */
  name: 'Item'
}
</script>

📚 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