# vue/no-undef-components
disallow use of undefined components in
<template>
This rule reports components that are used in the <template>, but that are not defined in the <script setup> or the Options API's components section.
Undefined components will be resolved from globally registered components. However, if you are not using global components, you can use this rule to prevent run-time errors.
Note
This rule cannot check globally registered components and components registered in mixins unless you add them as part of the ignored patterns.
<script setup>
import Foo from './Foo.vue'
</script>
<template>
<!-- ✓ GOOD -->
<Foo />
<!-- ✗ BAD -->
<Bar />
</template>
<!-- ✓ 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-undef-components": ["error", {
"ignorePatterns": []
}]
}
ignorePatternsSuppresses all errors if component name matches one or more patterns.
# ignorePatterns: ['custom(\\-\\w+)+']
<script setup>
</script>
<template>
<!-- ✓ GOOD -->
<CustomComponent />
<!-- ✗ BAD -->
<Bar />
</template>
<!-- ✓ 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>
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v8.4.0