no-reserved-component-names.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-reserved-component-names	disallow the use of reserved names in component definitions	v6.1.0

vue/no-reserved-component-names

disallow the use of reserved names in component definitions

• ⚙️ This rule is included in all of "plugin:vue/vue3-essential", *.configs["flat/essential"], "plugin:vue/essential", *.configs["flat/vue2-essential"], "plugin:vue/vue3-strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/vue3-recommended", *.configs["flat/recommended"], "plugin:vue/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>

🔧 Options

{
  "vue/no-reserved-component-names": ["error", {
    "disallowVueBuiltInComponents": false,
    "disallowVue3BuiltInComponents": 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.

"disallowVueBuiltInComponents": true

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

"disallowVue3BuiltInComponents": true

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

👫 Related Rules

• vue/multi-word-component-names

📚 Further Reading

• List of html elements
• List of SVG elements
• Kebab case elements
• Valid custom element name
• API - Built-In Components
• API (for v2) - Built-In Components

🚀 Version

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

🔍 Implementation

• Rule source
• Test source