Local components declared in a Vue component should be used

  • VUE_UNUSED_LOCAL_COMPONENT
  • Code Quality
  • Low
  • vue

This rule applies when local components declared in a Vue component are not used.

For maintainability, it is recommended to remove unused local components. Also, it might be a mistake that a programmer forgets to use the declared local components.

Noncompliant Code Example

View with compliant examples side by side
<template>
  <div>
    <div>name: {{ person.name }}</div>
    <div>age: {{ person.age }}</div>
    <Address :info="person.address" />
    <!-- <EmailAddress :info="person.contact.emailAddress" /> -->
    <Contact :info="person.contact" />
  </div>
</template>

<script>
import Address from "./Address";
import EmailAddress from "./EmailAddress";
import Contact from "./Contact";

export default {
  props: ["person"],
  components: {
    Address,
    EmailAddress, // VUE_UNUSED_LOCAL_COMPONENT alarm
    Contact
  }
}
</script>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <div>
    <div>name: {{ person.name }}</div>
    <div>age: {{ person.age }}</div>
    <Address :info="person.address" />
    <Contact :info="person.contact" />
  </div>
</template>

<script>
import Address from "./Address";
import Contact from "./Contact";

export default {
  props: ["person"],
  components: {
    Address,
    Contact
  }
}
</script>

Version

This rule was introduced in DeepScan 1.18.0.

See