# 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>
<!-- filename: Todo.vue -->
<!-- ✗ BAD -->
<script setup>
// ...
</script>
<!-- filename: TodoItem.vue -->
<!-- ✓ GOOD -->
<script setup>
// ...
</script>
<!-- filename: Todo.vue -->
<!-- ✓ GOOD -->
<script setup>
// ...
</script>
<script>
export default {
name: 'TodoItem'
}
</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>
<!-- filename: Todo.vue -->
<!-- ✓ GOOD -->
<script setup>
// ...
</script>
# 📚 Further Reading
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.20.0