noVueExcessiveProps (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueExcessiveProps
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/max-props

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueExcessiveProps": "error"
6
      }
7
    }
8
  }
9
}

Description

Limit the number of props a Vue component can declare.

A component with many props usually does too many things. Each prop is another input that the component has to handle and that its users have to understand. Splitting the component into smaller components keeps each of them easier to read, use, and test.

This rule counts the props declared with the props option, and with defineProps() in <script setup>. A prop name that is declared more than once is counted once.

The rule only counts props whose names it can read. For example, it can’t count props declared with a spread (...sharedProps), or with a type imported from another file.

Examples

The examples below set maxProps to 2.

Invalid

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueExcessiveProps": {
6
          "level": "on",
7
          "options": {
8
            "maxProps": 2
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
<script setup lang="ts">
2
defineProps<{
3
  title: string;
4
  subtitle: string;
5
  icon: string;
6
}>();
7
</script>

code-block.vue:3:3 lint/nursery/noVueExcessiveProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This component declares too many props (3). The maximum allowed is 2.
  
    1 │ <script setup lang="ts">
    2 │ defineProps<{
  > 3 │   title: string;
      │   ^^^^^^^^^^^^^^
  > 4 │   subtitle: string;
  > 5 │   icon: string;
      │   ^^^^^^^^^^^^^
    6 │ }>();
    7 │ </script>
  
  ℹ Each prop is another input that the component has to handle, which makes it harder to read, use, and test.
  
  ℹ Split the component into smaller components that each need fewer props.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script>
2
export default {
3
  props: {
4
    title: String,
5
    subtitle: String,
6
    icon: String,
7
  },
8
};
9
</script>

code-block.vue:4:5 lint/nursery/noVueExcessiveProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This component declares too many props (3). The maximum allowed is 2.
  
    2 │ export default {
    3 │   props: {
  > 4 │     title: String,
      │     ^^^^^^^^^^^^^^
  > 5 │     subtitle: String,
  > 6 │     icon: String,
      │     ^^^^^^^^^^^^
    7 │   },
    8 │ };
  
  ℹ Each prop is another input that the component has to handle, which makes it harder to read, use, and test.
  
  ℹ Split the component into smaller components that each need fewer props.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script setup>
2
defineProps(["title", "subtitle"]);
3
</script>

Options

`maxProps`

Default: 10

The maximum number of props a component can declare. It must be at least 1.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueExcessiveProps": {
6
          "level": "on",
7
          "options": {
8
            "maxProps": 1
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
<script setup>
2
defineProps({
3
  title: String,
4
  subtitle: String,
5
});
6
</script>

code-block.vue:3:3 lint/nursery/noVueExcessiveProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This component declares too many props (2). The maximum allowed is 1.
  
    1 │ <script setup>
    2 │ defineProps({
  > 3 │   title: String,
      │   ^^^^^^^^^^^^^^
  > 4 │   subtitle: String,
      │   ^^^^^^^^^^^^^^^^
    5 │ });
    6 │ </script>
  
  ℹ Each prop is another input that the component has to handle, which makes it harder to read, use, and test.
  
  ℹ Split the component into smaller components that each need fewer props.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script setup>
2
defineProps({
3
  title: String,
4
});
5
</script>

noVueExcessiveProps (JavaScript)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

maxProps

Invalid

Valid

Related links

`maxProps`