vue/no-unused-components
disallow registering components that are not used inside templates
- ⚙️ This rule is included in all of
"plugin:vue/essential",*.configs["flat/essential"],"plugin:vue/vue2-essential",*.configs["flat/vue2-essential"],"plugin:vue/strongly-recommended",*.configs["flat/strongly-recommended"],"plugin:vue/vue2-strongly-recommended",*.configs["flat/vue2-strongly-recommended"],"plugin:vue/recommended",*.configs["flat/recommended"],"plugin:vue/vue2-recommended"and*.configs["flat/vue2-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
json
{
"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