Note

This is a documentation for version 7.0.0-alpha.5.
To check version 6.2.2 go here. To check previous releases go here.

# vue/no-unregistered-components

disallow using components that are not registered inside templates

# 📖 Rule Details

This rule reports components that haven't been registered and are being used in the template.

Note

This rule cannot check globally registered components and components registered in mixins unless you add them as part of the ignored patterns. component, suspense and teleport are ignored by default.

<!-- ✓ GOOD --> <template> <div> <h2>Lorem ipsum</h2> <the-modal> <component is="TheInput" /> <component :is="'TheDropdown'" /> <TheButton>CTA</TheButton> </the-modal> </div> </template> <script> import TheButton from 'components/TheButton.vue' import TheModal from 'components/TheModal.vue' import TheInput from 'components/TheInput.vue' import TheDropdown from 'components/TheDropdown.vue' export default { components: { TheButton, TheModal, TheInput, TheDropdown, } } </script>
Now loading...
<!-- ✗ BAD --> <template> <div> <h2>Lorem ipsum</h2> <TheModal /> </div> </template> <script> export default { components: { } } </script>
Now loading...

# 🔧 Options

{
  "vue/no-unregistered-components": ["error", {
    "ignorePatterns": []
  }]
}
  • ignorePatterns Suppresses all errors if component name matches one or more patterns.

# ignorePatterns: ['custom(\\-\\w+)+']

<!-- ✓ GOOD --> <template> <div> <h2>Lorem ipsum</h2> <CustomComponent /> </div> </template> <script> export default { components: { }, } </script>
Now loading...
<!-- ✗ BAD --> <template> <div> <h2>Lorem ipsum</h2> <WarmButton /> </div> </template> <script> export default { components: { }, } </script>
Now loading...

# 🔍 Implementation