JS.VUE.NO.RESERVED.COMPONENT.NAMES

Rule Details

This rule prevents name collisions between Vue components and standard HTML elements and built-in components.

{'vue/no-reserved-component-names': ['error']}

<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

{'vue/no-reserved-component-names': ['error', {disallowVueBuiltInComponents: true}]}

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

"disallowVue3BuiltInComponents": true

{'vue/no-reserved-component-names': ['error', {disallowVue3BuiltInComponents: true}]}

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

Further Reading

• List of html elements (https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
• List of SVG elements (https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
• Kebab case elements (https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name/22545622#22545622)
• Valid custom element name (https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)
• API - Built-In Components (https://v3.vuejs.org/api/built-in-components.html)
• API (for v2) - Built-In Components (https://v2.vuejs.org/v2/api/index.html#Built-In-Components)