Passing component to child <component :is> and props typings

[hidde-jan]

I came into the following situation. I have generic component that renders a child component. However, I want to make the actual child component dynamic. Check this example:

<script setup lang="ts">
// PassingComponentDown.vue
import SimpleHeader from "./SimpleHeader.vue"

withDefaults(
  defineProps<{
    componentToRender: ??? // What here? Object does not work
  }>(),
  {
    componentToRender: SimpleHeader
  }
)
</script>

<template>
  <p> Something here</p>
  <component :is="componentToRender" :some-prop="1" other-prop="stringy" />
  <p>Something else</p>
</template>

<script setup lang="ts">
// SimpleHeader.vue
defineProps<{ someProp: number, otherProp: string }>()
</script>

<template>
  <h1>Simple: {{ someProp }} {{ otherProp }}</h1>
</template>

<script setup lang="ts">
// FancyHeader.vue
defineProps<{ someProp: number, otherProp: string }>()
</script>

<template>
  <h1>Simple title component</h1>
  <h2 class="subheading">{{ someProp }}: {{ otherProp }}</h2>
</template>

<script setup lang="ts">
// ThirdComponent.vue
import PassingDownComponent from "./PassingComponentDown.vue"
import SimpleHeader from "./SimpleHeader.vue"
</script>

<template>
  <PassingDownComponent :component-to-reader="SimpleHeader" />
</template>

Why not slots?

As in the example, passing around a component is very simple. If we were working with slots, then we'd need to bind to all slot props from the parent and pass them to the child component:

// PassingComponentDown.vue
<template>
  <p> Something here</p>
  <slot v-bind="{ someProp, otherProp }">
    <component :is="componentToRender" :some-prop="1" other-prop="stringy" />
  </slot>
  <p>Something else</p>
</template>

// ThirdComponent.vue
<template>
  <PassingDownComponent v-slot="slotProps">
    <FancyHeader v-bind="slotProps" />
  </PassingDownComponent>
</template>

Of course, this is quite simple, but it is definitely more unwieldy than the first manner.

[viniciusteixeiradias]

I'm not sure if I fully understand your question, but I think this is what you're looking for.
I hope it helps you :)

<script setup lang="ts">
import type { Component } from "vue";
import SimpleHeader from "./SimpleHeader.vue"

interface Props {
  componentToRender: Component
}

const props = withDefaults(defineProps<Props>(), {
  componentToRender: SimpleHeader
})
</script>

<template>
  <p> Something here</p>
  <component :is="props.componentToRender" :some-prop="1" other-prop="stringy" />
  <p>Something else</p>
</template>

[hidde-jan]

Have you verified that this actually works?

[hidde-jan]

Because I’ve tried this with the defaults and ran into typing issues. I can try again.

[viniciusteixeiradias]

Yes, its works for me. Try again please.