# vue/no-unused-components
disallow registering components that are not used inside templates
- ⚙️ 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 reports components that haven't been used in the 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>
import TheButton from 'components/TheButton.vue'
import TheModal from 'components/TheModal.vue'
export default {
components: {
TheButton, // Unused component
'the-modal': TheModal // Unused component
}
}
</script>
Note
Components registered under PascalCase or camelCase names have may be called however you like, except using snake_case. Otherwise, they will need to be called directly under the specified name.
# 🔧 Options
{
"vue/no-unused-components": ["error", {
"ignoreWhenBindingPresent": true
}]
}
ignoreWhenBindingPresent... suppresses all errors if binding has been detected in the template defaulttrue
# ignoreWhenBindingPresent: false
<!-- ✓ GOOD -->
<template>
<div>
<h2>Lorem ipsum</h2>
<TheButton v-if="" />
<TheSelect v-else-if="" />
<TheInput v-else="" />
</div>
</template>
<script>
import TheButton from 'components/TheButton.vue'
import TheSelect from 'components/TheSelect.vue'
import TheInput from 'components/TheInput.vue'
export default {
components: {
TheButton,
TheSelect,
TheInput,
},
}
</script>
<!-- ✗ BAD -->
<template>
<div>
<h2>Lorem ipsum</h2>
<component :is="computedComponent" />
</div>
</template>
<script>
import TheButton from 'components/TheButton.vue'
import TheSelect from 'components/TheSelect.vue'
import TheInput from 'components/TheInput.vue'
export default {
components: {
TheButton, // <- not used
TheSelect, // <- not used
TheInput, // <- not used
},
computed: {
computedComponent() {
}
}
}
</script>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0