Eslint-plugin-vue: Rule proposal: no-unused-component

[xiGUAwanOU]

Hello there,

In the SFC-styled component definition, one can import a component, and then register it in the components section, while not using it in the template. See the example below:

<template>
  <div>I'm not using any component.</div>
</template>

<script>
  import SomeComponent from './somewhere'
  export default {
    components: {
      SomeComponent  // Should be treated as unused component
    }
  }
</script>

In this case, the imported component is considered as used variable according to standard eslint rules, since the components section contains its reference. If there is a rule in eslint-plugin-vue that could prevent this happening, it would be great.

Cheers,
Zihan

[chrisvfritz]

I agree this would be great - I'd put it in strongly-recommended.

[xiGUAwanOU]

Thank you very much for implementing the rule, it helps us a lot! 👍

[AnonymousArthur]

What about syntax like:
<template><component is="component_name"/></template>
when

const component_1 = import('./component_1.vue')
export default {
  components: {
    'component_name': component_1
  }
}

this is primarily used for dynamic components.
This currently can not be identified as used component.