Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: v9.19.0
- eslint-plugin-vue version: v9.32.0
- Vue version: v3.5.13
- Node version: v23.6.0
- Operating System: (Not relevant)
Please show your full configuration:
export default [ {
rules: {
'vue/max-props': [ 'warn', { maxProps: 6 } ],
}
} ]
What did you do?
I'm trying to use a discriminated union for the type of my props. Here's a real-life example:
type Props = {
items: T[];
disabled?: boolean;
defaultValue?: number;
orientation?: 'vertical' | 'horizontal';
} & {
multiple?: true;
nonCollapsible?: never;
} | {
multiple?: false;
nonCollapsible?: boolean;
};
For all intents and purposes, I would argue this component defines six props:
items
disabled
defaultValue
orientation
multiple
nonCollapsible
The max-props rule, however, counts eight.
Here's a simplified example that can also be verified on the rule's documentation page:
<script lang="ts" setup>
defineProps<{prop1: string} | {prop1: number}>()
</script>
What did you expect to happen?
I don't know how the rule evaluates the Typescript props definition, but it should enumerate the possible keys of the type of the props and count the unique keys. Evidently, it doesn't do this currently.
What actually happened?
ESLint: Component has too many props (8). Maximum allowed is 5.(vue/ max-props)
Repository to reproduce this issue
See the documentation page linked above, just paste the snippet in the first code box.