# 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","plugin:vue/essential","plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/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) ... Iftrue, disallow Vue.js 2.x built-in component names. Default isfalse.disallowVue3BuiltInComponents(boolean) ... Iftrue, disallow Vue.js 3.x built-in component names. Default isfalse.
# "disallowVueBuiltInComponents": true
<script>
/* ✗ BAD */
export default {
name: 'transition-group'
}
</script>
# "disallowVue3BuiltInComponents": true
<script>
/* ✗ BAD */
export default {
name: 'teleport'
}
</script>
# 📚 Further Reading
- List of html elements (opens new window)
- List of SVG elements (opens new window)
- Kebab case elements (opens new window)
- Valid custom element name (opens new window)
- API - Built-In Components (opens new window)
- API (for v2) - Built-In Components (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v6.1.0