JS.VUE.MULTI.WORD.COMPONENT.NAMES
Ensure component names to be multi-word
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.
{'vue/multi-word-component-names': ['error']}
/* GOOD */
Vue.component('todo-item', {
// ...
})
/* BAD */
Vue.component('Todo', {
// ...
})
{'vue/multi-word-component-names': ['error']}
<script>
/* GOOD */
export default {
name: 'TodoItem',
// ...
}
</script>
{'vue/multi-word-component-names': ['error']}
<script>
/* BAD */
export default {
name: 'Todo',
// ...
}
</script>
{'vue/multi-word-component-names': ['error']}
<!-- filename: Todo.vue -->
<script>
/* BAD */
export default {
// ...
}
</script>
{'vue/multi-word-component-names': ['error']}
<!-- filename: Todo.vue -->
<!-- BAD -->
<script setup>
// ...
</script>
{'vue/multi-word-component-names': ['error']}
<!-- filename: TodoItem.vue -->
<!-- GOOD -->
<script setup>
// ...
</script>
{'vue/multi-word-component-names': ['error']}
<!-- 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"]
{'vue/multi-word-component-names': ['error', {ignores: ['Todo']}]}
<script>
export default {
/* GOOD */
name: 'Todo'
}
</script>
{'vue/multi-word-component-names': ['error', {ignores: ['Todo']}]}
<script>
export default {
/* BAD */
name: 'Item'
}
</script>
{'vue/multi-word-component-names': ['error', {ignores: ['Todo']}]}
<!-- filename: Todo.vue -->
<!-- GOOD -->
<script setup>
// ...
</script>
Further Reading
- Style guide - Multi-word component names (https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names)