Why is this an issue?

In Vue, a prop can be declared as required and can also be given a default value. These two settings contradict each other. A required prop must always be provided by the parent component, so its default value can never be applied. Conversely, a prop with a default value can be omitted, which is the opposite of being required.

As a result, a required prop with a default value is effectively the same as an optional prop, and the default value becomes dead code that is never used. This redundancy is usually a sign of a mistake: either the prop was meant to be optional, or the default value should be removed.

To fix the issue, make the prop optional so that its default value is actually used, or remove the default value if the prop is genuinely required. The same applies to <script setup> props declared with defineProps and withDefaults.

Code examples

Noncompliant code example

<script>
export default {
  props: {
    name: {
      required: true, // Noncompliant: the default value is never used for a required prop
      default: 'Hello'
    }
  }
}
</script>

Compliant solution

<script>
export default {
  props: {
    name: {
      required: false,
      default: 'Hello'
    }
  }
}
</script>

Noncompliant code example

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    name: string | number // Noncompliant: a required prop should not have a default value
    age?: number
  }>(),
  {
    name: 'Foo'
  }
);
</script>

Compliant solution

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    name?: string | number
    age?: number
  }>(),
  {
    name: 'Foo'
  }
);
</script>

Resources

Documentation