Is it possible to support the type-based autocomplettion for those fallthrough attributes?

[neko-para]

Suppose there are two components A and B that A "inherits" B.

e.g. B is an abstract button and A is to style it.

// comp a
<template>
  <component-b v-bind="$attrs">
    <slot></slot>
  </component-b>
</template>

// comp b
<template>
  <div>{{ some_prop }}</div>
</template>

The problem is that when I use outside, typescript cannot tell me that it needs some_prop.
Is it possible to achieve that? I know that copying all props of component b and passing them manually could solve, but that's too ugly.

[StreakingMan]

I'm also looking for a solution, or this should be powered by volar?

[Shyam-Chen]

export interface ButtonProps extends ButtonHTMLAttributes {
  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
  icon?: string;
}

<script lang="ts" setup>
import type { ButtonProps } from './types';

defineProps<ButtonProps & { variant?: 'contained' | 'outlined' | 'text' }>();
</script>

[ShGKme]

This solution works for typing only for HTML element wrappers with HTML attributes.

But with component wrappers it sets all wrapped component's props as a wrapper's props.

<script lang="ts" setup>
import type { BaseCompProps } from './types';

defineProps<BaseCompProps & { variant?: 'contained' | 'outlined' | 'text' }>();
</script>

<template>
  <!-- How to pass all BaseCompProps without new "variant"? -->
  <!-- BaseCompProps are NOT inherited like html attributes from ButtonHTMLAttributes -->
  <BaseComp  />
</template>

[rudyxu1102]

See vuejs/rfcs#477. Discussion is welcome.