Forwarding Props to Dynamically Rendered Components using <SanityContent> in Nuxt 3

[tulip781]

Hello maintainers and community,

I've been working with NuxtSanity in a Nuxt3 project and making use of the component. I've set it up as follows:

<template>
  <SanityContent :blocks="props.blocks" :serializers="serializers" />
</template>

<script setup>
import SectionElement from './SectionElement.vue'
import BaseFigure from '@/components/elements/media/BaseFigure'
import BaseLoop from '@/components/elements/media/BaseLoop'

const props = defineProps({
  blocks: {
    type: Array,
    default: () => [],
  },
})

const serializers = {
  types: {
    pictureTitled: BaseFigure,
    video: BaseLoop,
  },

  styles: {
    normal: SectionElement,

  },
}
</script>

From my understanding, the component dynamically renders other Vue components based on the serializers provided. I'm trying to figure out if there's a built-in mechanism or a recommended way to forward props to these dynamically generated components. Specifically, I want to pass a prop that can control a transition state inside them.

Has anyone faced a similar issue or can provide guidance on how to achieve this? Any help would be greatly appreciated!

Thank you!