Issues with vue/no-unused-components

[sqal]

Tell us about your environment

• ESLint Version: 5.3.0
• eslint-plugin-vue Version: 5.0.0-beta.3
• Node Version: 10.4.1

Please show your full configuration:

module.exports = {
  root: true,
  extends: [
    'airbnb-base',
    'plugin:vue/strongly-recommended',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['vue'],
};

What did you do? Please include the actual source code causing the issue.

Issue 1

<template>
  <div id="app" class="flex flex-col h-screen">
    <Header></Header>
    <div class="flex-fill">
      <router-view></router-view>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from 'components/Layout/Header';
  import Footer from 'components/Layout/Footer';

  export default {
    name: 'App',
    components: {
      Header,
      Footer,
    },
  };
</script>

Erors:

  18:7  error  The "Header" component has been registered but not used  vue/no-unused-components
  19:7  error  The "Footer" component has been registered but not used  vue/no-unused-components

Issue 2

<template>
  <div>
    <component :is="dynamicComponent"></component>
  </div>
</template>

<script>
  import Foo from 'components/Foo';
  import Bar from 'components/Bar';

  export default {
    name: 'App',
    components: {
      Foo,
      Bar,
    },
    computed: {
      dynamicComponent() {
        if (this.condition) {
          return 'Foo';
        }

        return 'Bar';
      },
    },
  };
</script>

Errors:

  14:7   error  The "Foo" component has been registered but not used  vue/no-unused-components
  15:7   error  The "Bar" component has been registered but not used  vue/no-unused-components

What did you expect to happen?

Regarding issue nr. 1.

As you can see, in the template I write components names in PascalCase because both header and footer are reserved html names. In this case I expect the plugin can detect whether component name is written in PascalCase or kebab-case.

Regarding issue nr. 2.

This is probably a very common case when someone uses dynamic component tag and uses computed property to switch between some components. In this case I think it would be great if I could somehow tell the plugin to ignore the components that are registered via special <component /> tag.

[michalsnik]

Hey @sqal! Thanks for posting this issue.

1. this is a bug and I'm going to fix it right away
2. we can't tell what components have been used is this case, so we report them and you can explicitly disable rule on per-case being completely aware of them being consumed in other way. alternatively we might introduce an option to ignore reporting any issues if we detect the is binding somewhere inside the template. what do you think about it?

[AnonymousArthur]

@michalsnik I think this rule should automatically exclude the case that <component> is being used in a template.

[quentinus95]

@michalsnik I have a third issue with no-unused-components where component usage is not detected when declared in an <svg>:

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%">
    <g v-for="(step, stepKey) of steps" :key="stepKey">
      <g v-for="(job, jobKey) of step" :key="jobKey">
        <svg-pipeline-job :step="step" :job="job" />
      </g>
    </g>
  </svg>
</template>

<script>
  import SvgPipelineJob from './SVGPipelineJob'

  export default {
    name: 'svg-pipeline',
    components: {
      /* eslint-disable vue/no-unused-components */
      SvgPipelineJob
    }
  }
</script>

Same version used.