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

enforce props with default values ​​to be optional

# πŸ“– Rule Details

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. This rule enforces all props with default values to be optional.

<script setup lang="ts"> /* βœ“ GOOD */ const props = withDefaults( defineProps<{ name?: string | number age?: number }>(), { name: "Foo", } ); /* βœ— BAD */ const props = withDefaults( defineProps<{ name: string | number age?: number }>(), { name: "Foo", } ); </script>
Now loading...
<script> export default { props: { /* βœ“ GOOD */ foo: { required: false, default: 'Hello' }, bar: { required: true }, /* βœ— BAD */ baz: { required: true, default: 'Hello' }, }, } </script>
Now loading...

# πŸ”§ Options

{
  "vue/no-required-prop-with-default": ["error", {
    "autofix": false,
  }]
}
  • "autofix" ... If true, enable autofix. (Default: false)

# πŸš€ Version

This rule was introduced in eslint-plugin-vue v9.6.0

# πŸ” Implementation