vue/no-required-prop-with-default Suspicious

🚧 An auto-fix is still under development.

What it does

Enforce props with default values to be optional.

Why is this bad?

If a prop is declared with a default value, whether it is required or not, we can always skip it in actual use. In that situation, the default value would be applied. So, a required prop with a default value is essentially the same as an optional prop.

Examples

Examples of incorrect code for this rule:

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

Examples of correct code for this rule:

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

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny vue/no-required-prop-with-default --vue-plugin

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/no-required-prop-with-default": "error"
  }
}

References

• Rule Source