How to merge props in a better way?

[VanishMax]

Hi! Wanted to discuss an efficient way of merging custom and primitive props.

Recently I started using useForwardPropsEmits heavily and enjoy the simplicity of this hook for my custom components that are composed out of Radix-vue primitives.

The problem happens when I make TS definitions of these components with the props over the primitive props like so:

<template>
  <ToastRoot v-bind="forwarded">
    <ToastTitle>{{ title }}</ToastTitle>
    <ToastClose />
  </ToastRoot>
</template>

<script setup lang="ts">
import type { ToastRootProps, ToastRootEmits } from 'radix-vue';
import {
  ToastClose,
  ToastRoot,
  ToastTitle,
  useForwardPropsEmits,
} from 'radix-vue';

interface ToastProps extends ToastRootProps {
  title: string;
}

const props = defineProps<ToastProps>();
const emits = defineEmits<ToastRootEmits>();

const forwarded = useForwardPropsEmits(props, emits);
</script>

Then I call it like this:

<Toast default-open :duration="5000" title="Hello" />

This props merging causes an obvious Vue warning in development mode: Extraneous non-props attributes (title) were passed to component but could not be automatically inherited because component renders fragment or text root nodes..

I can't really put my mind into which way of separating custom props from primitive props would be the most elegant and efficient. Not sure if I am the only one with this struggle or not. Maybe some new hook from radix-vue side could also help?

[zernonia]

Thanks for starting this discussion @VanishMax . We've encountered similar issue too, and we found out that using reactivePick or reactiveOmit can be a good way to solve the headache here.

eg:

<template>
  <ToastRoot v-bind="forwarded">
    <ToastTitle>{{ title }}</ToastTitle>
    <ToastClose />
  </ToastRoot>
</template>

<script setup lang="ts">
import { reactiveOmit } from "@vueuse/core"
import type { ToastRootProps, ToastRootEmits } from 'radix-vue';
import {
  ToastClose,
  ToastRoot,
  ToastTitle,
  useForwardPropsEmits,
} from 'radix-vue';

interface ToastProps extends ToastRootProps {
  title: string;
}

const props = defineProps<ToastProps>();
const emits = defineEmits<ToastRootEmits>();

const toastRootProps = reactiveOmit(props, 'title') // omit out props.title to prevent it from binding onto `ToastRoot`
const forwarded = useForwardPropsEmits(toastRootProps, emits); // only forwarding the props related to `ToastRoot`
</script>

It's not super clean, but it gets the job done for now.

---

I was looking into this Vue discussion for supporting multiple defineProps call in a component, which allows dev to write clearer code when defining prop.

In your case it would come in handy to have 2 defineProps, 1 for ToastRoot, another for ToastTitle.
However that seems like something still to be discussed by the Vue core team

[VanishMax]

Exactly! The first thought I had when encountered this issue – "why can't I just use a couple of defineProps?".

Thanks a lot for the hint about the reactivePick and reactiveOmit. Seems like a good solution for now. Also, it would be nice to extend the composition guide in the documentation with some examples of composing the components with useForwardPropsEmits and maybe this hack of reactivePick.