Passing props to a Custom component

[christiantld]

Hi. I'm not sure if this is a new feature, a bug or just myself not being able to find the solution. I'm using with Nuxt

I'm to render an Iframe inside Rich Text. I have a custom component which should render an Iframe based on the HTML written by the user in storyblok interface. The custom component is added to Rich Text as a block and its equivalent Vue file is defined inside resolver>components configuration. I've got my custom component rendered just fine in storyblok but I can't access its props via attrs even though I can see the attrs when logging de rich-text data. The prop I need is inside attrs> body[] but as I said the attrs it's undefined on my custom component.

Any ideas or suggestions for what can be done?

my custom component looks like this:

<template>
  <div>
    <p>My Iframe</p>
    <div v-html="html" />
  </div>
</template>

<script>
export default {
  name: 'Iframe',
  props: {
    attrs: {
      type: Object,
      default: () => {},
    },
  },
  setup({ attrs }) {
    const { html } = attrs.html

    return { html }
  },
}
</script>

[m4rvr]

Hey! What if you don't destructure the props and use props.attrs.html instead? It's not allowed to destructure props because the properties lose reactivity. Doing setup({ attrs }) is bad where setup(props) is fine. (I know I do that in the plugin too but I didn't know at the time I created this plugin, a new version is in the making though)

[christiantld]

Yeah. Based on what you said about destructure plus a closer look at the source code of the lib I had the insight of use body instead of attrs and I was able to reach the html prop. Thank you so much!

[sigtm]

@MarvinRudolph Sorry to comment on a closed ticket, but I have a related issue/question. It looks to me like what Storyblok normally passes in as the blok property is passed in as body when a component is added inside a rich text field.

Is there any way to unify them so my components can declare a single prop that is used by both contexts? Or am I doing something wrong? I am new to both Nuxt and Storyblok, so apologies if this is a dumb question.

Thanks for the awesome plugin!

[m4rvr]

@MarvinRudolph Sorry to comment on a closed ticket, but I have a related issue/question. It looks to me like what Storyblok normally passes in as the blok property is passed in as body when a component is added inside a rich text field.

Is there any way to unify them so my components can declare a single prop that is used by both contexts? Or am I doing something wrong? I am new to both Nuxt and Storyblok, so apologies if this is a dumb question.

Thanks for the awesome plugin!

Hey, all good! Currently, there is no way to unify it and the data of blok is always passed as the body prop.

[sigtm]

@MarvinRudolph Ok no worries, I'll work around it – thanks for the clarification!