← Back to rules

vue/max-props Restriction

What it does

Enforce a maximum number of props defined for a given Vue component.

Why is this bad?

A large number of props on a component can indicate that it is trying to do too much and may be difficult to maintain or understand.

By limiting the number of props, developers are encouraged to avoid overly complex components and instead create smaller, more focused components that are easier to reason about.

Examples

Examples of incorrect code for this rule with the default { "maxProps": 1 } option:

<script setup>
defineProps({
  prop1: String,
  prop2: String,
})
</script>

Examples of correct code for this rule with the default { "maxProps": 1 } option:

<script setup>
defineProps({
  prop1: String,
})
</script>

Configuration

This rule accepts a configuration object with the following properties:

maxProps

type: integer

default: 1

The maximum number of props allowed in a Vue SFC.

How to use

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

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/max-props": "error"
  }
}

CLI

oxlint --deny vue/max-props --vue-plugin

References

• Rule Source