vue/no-unused-components
disallow registering components that are not used inside templates
- ⚙️ This rule is included in all of
"plugin:vue/essential","plugin:vue/strongly-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 other than PascalCase name have to be called directly under the specified name, whereas if you register it using PascalCase you can call it however you like, except using snake_case.
🔧 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>