eslint-plugin-vue

Appearance

vue/no-reserved-component-names ​

disallow the use of reserved names in component definitions

  • ⚙️ 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 prevents name collisions between Vue components and standard HTML elements and built-in components.

<script> /* ✗ BAD */ export default { name: 'div' } </script>
Now loading...

🔧 Options ​

json
{
  "vue/no-reserved-component-names": ["error", {
    "disallowVueBuiltInComponents": false,
    "disallowVue3BuiltInComponents": false,
    "htmlElementCaseSensitive": false,
  }]
}
  • disallowVueBuiltInComponents (boolean) ... If true, disallow Vue.js 2.x built-in component names. Default is false.
  • disallowVue3BuiltInComponents (boolean) ... If true, disallow Vue.js 3.x built-in component names. Default is false.
  • htmlElementCaseSensitive (boolean) ... If true, component names must exactly match the case of an HTML element to be considered conflicting. Default is false (i.e. case-insensitve comparison).

"disallowVueBuiltInComponents": true ​

<script> /* ✗ BAD */ export default { name: 'transition-group' } </script>
Now loading...

"disallowVue3BuiltInComponents": true ​

<script> /* ✗ BAD */ export default { name: 'teleport' } </script>
Now loading...

"htmlElementCaseSensitive": true ​

<script> /* ✓ GOOD */ export default { name: 'Button' } </script>
Now loading...
<script> /* ✗ BAD */ export default { name: 'button' } </script>
Now loading...

📚 Further Reading ​

🚀 Version ​

This rule was introduced in eslint-plugin-vue v6.1.0

🔍 Implementation ​