JS.VUE.NO.UNUSED.COMPONENTS

Disallow registering components that are not used inside templates

Rule Details

This rule reports components that haven't been used in the template.

{'vue/no-unused-components': ['error']}

Copy

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

{'vue/no-unused-components': ['error']}

Copy

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

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

Copy

{
  "vue/no-unused-components": ["error", {
    "ignoreWhenBindingPresent": true
  }]
}

ignoreWhenBindingPresent ... suppresses all errors if binding has been detected in the template default true

`ignoreWhenBindingPresent: false`

{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}

Copy

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

{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}

Copy

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