multi-word-component-names.md

Pattern: Missing multi-word component name

Issue: -

Description

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

• eslint-plugin-vue - multi-word-component-names
• Style guide - Multi-word component names