# 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', { // ... })
Now loading...
<script> /* ✓ GOOD */ export default { name: 'TodoItem', // ... } </script>
Now loading...
<script> /* ✗ BAD */ export default { name: 'Todo', // ... } </script>
Now loading...
<!-- filename: Todo.vue --> <script> /* ✗ BAD */ export default { // ... } </script>
Now loading...

# 🔧 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>
Now loading...
<script> export default { /* ✗ BAD */ name: 'Item' } </script>
Now loading...

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.20.0

# 🔍 Implementation

Last Updated: 10/29/2021, 2:19:34 AM