no-unused-components.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-unused-components	disallow registering components that are not used inside templates	v7.0.0

vue/no-unused-components

disallow registering components that are not used inside templates

• ⚙️ This rule is included in all of "plugin:vue/vue3-essential", *.configs["flat/essential"], "plugin:vue/essential", *.configs["flat/vue2-essential"], "plugin:vue/vue3-strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/vue3-recommended", *.configs["flat/recommended"], "plugin:vue/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>

::: warning 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 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>

<!-- ✗ 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

🔍 Implementation

• Rule source
• Test source