vue/multi-word-component-names
require component names to be always multi-word
- ⚙️ This rule is included in all of
"plugin:vue/essential",*.configs["flat/essential"],"plugin:vue/vue2-essential",*.configs["flat/vue2-essential"],"plugin:vue/strongly-recommended",*.configs["flat/strongly-recommended"],"plugin:vue/vue2-strongly-recommended",*.configs["flat/vue2-strongly-recommended"],"plugin:vue/recommended",*.configs["flat/recommended"],"plugin:vue/vue2-recommended"and*.configs["flat/vue2-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 single words.
/* ✓ 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
json
{
"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>
👫 Related Rules
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v7.20.0