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
json
{
"vue/no-required-prop-with-default": ["error", {
"autofix": false,
}]
}
"autofix"
... Iftrue
, enable autofix. (Default:false
)
👫 Related Rules
🚀 Version
This rule was introduced in eslint-plugin-vue v9.6.0