prefer-optional-props-using-with-defaults.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/prefer-optional-props-using-with-defaults	enforce props with default values ​​to be optional

vue/prefer-optional-props-using-with-defaults

enforce props with default values ​​to be optional

• ❗ This rule has not been released yet.
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 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 setup lang="ts">
  export default {
    /* ✓ GOOD */
    props: {
      name: {
        required: true,
        default: 'Hello'
      }
    }

    /* ✗ BAD */
    props: {
      name: {
        required: true,
        default: 'Hello'
      }
    }
  }
</script>

🔧 Options

{
  "vue/prefer-optional-props-using-with-defaults": ["error", {
    "autofix": false,
  }]
}

• "autofix" ... If true, enable autofix.

👫 Related Rules

• vue/require-default-prop

🔍 Implementation

• Rule source
• Test source