# 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>
<!-- ✗ BAD -->
<template>
<div>
<h2>Lorem ipsum</h2>
<TheModal />
</div>
</template>
<script>
export default {
components: {
}
}
</script>
# 🔧 Options
{
"vue/no-unregistered-components": ["error", {
"ignorePatterns": []
}]
}
ignorePatternsSuppresses 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>
<!-- ✗ BAD -->
<template>
<div>
<h2>Lorem ipsum</h2>
<WarmButton />
</div>
</template>
<script>
export default {
components: {
},
}
</script>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0