Skip to content

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>
Now loading...
<!-- ✗ 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>
Now loading...

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 default true

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>
Now loading...
<!-- ✗ 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>
Now loading...

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation