no-required-prop-with-default.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-required-prop-with-default	enforce props with default values to be optional	v9.6.0

vue/no-required-prop-with-default

enforce props with default values to be optional

• ⚙️ This rule is included in all of "plugin:vue/vue2-recommended", *.configs["flat/vue2-recommended"], "plugin:vue/recommended" and *.configs["flat/recommended"].
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.
• 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 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>

<script>
export default {
  props: {
    /* ✓ GOOD */
    foo: {
      required: false,
      default: 'Hello'
    },
    bar: {
      required: true
    },
    /* ✗ BAD */
    baz: {
      required: true,
      default: 'Hello'
    },
  },
}
</script>

🔧 Options

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

• "autofix" ... If true, enable autofix. (Default: false)

👫 Related Rules

• vue/require-default-prop

🚀 Version

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

🔍 Implementation

• Rule source
• Test source