Vue/Nuxt: props.builderBlock.id not being passed to component using the catch-all setup

[responsemktg]

Describe the bug
When trying to add child blocks in custom components, the example code for vue / Nuxt does not work

To Reproduce
Steps to reproduce the behavior:

1. Setup my file, as per https://github.com/BuilderIO/builder/tree/main/examples/vue/nuxt-3-catchall
2. Add my custom component: HelloWorld.vue:

<template>
  <div class="custom-container">
    <h2>{{ title }}</h2>
    <div class="content-area">
      <Blocks 
        :parent="props.builderBlock.id"
        :path="'component.options.content'"
        :blocks="content"
      />
    </div>
  </div>
</template>

<script setup>
import { Blocks } from '@builder.io/sdk-vue';

const props = defineProps({
  title: String,
  content: Array,
  builderBlock: Object
});
</script>

3. Register my component with the following:

  component: HelloWorldComponent,
  name: 'MyHelloWorldComponent',
  // Enable child blocks
  canHaveChildren: true,
  // Optional: Set requirements for child blocks
  childRequirements: {
    message: 'You can drop any content here'
  },
  image: 'https://cdn-icons-png.flaticon.com/512/1085/1085409.png',
  inputs: [
    {
      name: 'title',
      type: 'string',
      defaultValue: 'Hello',
    },
  ],

4. Within the builder interface, add the HelloWorld component to the page and then add any basic component as a child (text, for example)
5. Receive an error in the terminal when accessing the page:
   ERROR [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'id')

Expected behavior
Expect the nested block to show up in the builder interface, and localhost

In general, I am finding the Nuxt documentation to be a little difficult to follow (for example, lots of references to import { Builder } from '@builder.io/sdk-vue' , but that results in an error of Builder export not found)

When i dump out the props into the component - I see the title field, and nothing else.

Is this a limitation of the catch-all approach?

[sidmohanty11]

hello @responsemktg, the examples unfortunately are not maintained currently. You can follow our snippets directory, which contains up-to-date examples connected to our docs with the latest SDK releases.

To resolve this issue, you will need to provide shouldReceiveBuilderProps: { builderBlock: true }, which exposes this prop for use in your app.

builder/packages/sdks/snippets/react/src/components/CustomTabs.tsx

Lines 44 to 48 in 25f00ac

	shouldReceiveBuilderProps: {
	builderBlock: true,
	builderComponents: true,
	builderContext: true,
	},

Thanks for calling out on the docs, we are looking into resolving it sooner. Till then if you have any questions, please let us know.

[responsemktg]

@sidmohanty11 Thank you for the quick reply!
I realize maintaining docs for this many platforms is a challenge. One of the reasons we gave up on storyblok was due to fragmentation within documentation.
It is difficult for us to evaluate the builder.io product for future paid use when the team runs into errors from the official docs.

Is there a preferred method of submitting future examples of the vue / nuxt documentation that are out of sync with the snippets? Id love to help provide other examples of incomplete/inconsistent documentation.

[samijaber]

@responsemktg The best way for you to share any issues with documentation is to use the Give Feedback button in the docs page sidebar:

This will make sure that the feedback goes directly to our documentation team.

I realize maintaining docs for this many platforms is a challenge. One of the reasons we gave up on storyblok was due to fragmentation within documentation. It is difficult for us to evaluate the builder.io product for future paid use when the team runs into errors from the official docs.

I understand your sentiment! We have recently built a new documentation infrastructure that allows our team to create, maintain and test code snippets within our documentation to ensure they are updated with our latest SDK code and are constantly in sync. We are still migrating our old documentation to this new infrastructure, and this Vue code block is on the legacy system.

We appreciate your patience and know that once this migration is complete there will be no such discrepancies in our documentation moving forward.

[responsemktg]

hello @responsemktg, the examples unfortunately are not maintained currently. You can follow our snippets directory, which contains up-to-date examples connected to our docs with the latest SDK releases.

To resolve this issue, you will need to provide shouldReceiveBuilderProps: { builderBlock: true }, which exposes this prop for use in your app.

builder/packages/sdks/snippets/react/src/components/CustomTabs.tsx

Lines 44 to 48 in 25f00ac

	shouldReceiveBuilderProps: {
	builderBlock: true,
	builderComponents: true,
	builderContext: true,
	},

Thanks for calling out on the docs, we are looking into resolving it sooner. Till then if you have any questions, please let us know.

Im still having issues getting this set up in a Vue context.

I have added:

  shouldReceiveBuilderProps: {
    builderBlock: true,
    builderComponents: true,
    builderContext: true,
  }

And then in the props definition:

<script setup>
import { Blocks } from '@builder.io/sdk-vue';

const props = defineProps({
  title: String,
  builderBlock: Object
});

And thats great! I can now access the builderBlock to get the id. Im still stuck on:

• children added do not get added as a child of the parent, instead they get added as a new layer underneath
• what should the prop binding of :path equal on the Blocks component?
• what should the prop binding of :blocks equal on the blocks component? I tried :blocks="builderBlock.children" and that seemed to work in displaying nested content. However added children through the Add Block button still exhibit the behavior above of not being nested

[sidmohanty11]

hey @responsemktg, the docs should now be updated. Please give it a shot and let us know if they are still unclear.

To answer your questions:

children added do not get added as a child of the parent, instead they get added as a new layer underneath

this happens when the path provided is not correct to the blocks. Simply put, path dictates "what" should be put "where" during visual editing or drag and drop of elements. In this case (the example), we state it as 'component.options.content' or even just 'content' which we pass as props (inputs inside component info -> props for components)

what should the prop binding of :blocks equal on the blocks component? I tried :blocks="builderBlock.children" and that seemed to work in displaying nested content. However added children through the Add Block button still exhibit the behavior above of not being nested

blocks is an array of builder content that gets serialized in our SDKs and shows you the HTML content. So, as the example mentions, :blocks="content", this has the builder elements in it.

[responsemktg]

@sidmohanty11 A couple of notes:

• Documentation is still wrong: import { Builder } from '@builder.io/sdk-vue'; results in the error:

The requested module '/_nuxt/node_modules/.cache/vite/client/deps/@builder__io_sdk-vue.js?v=060e6e48' does not provide an export named 'Builder'

• The example code still does not work. Here is a video so you can see:

child-components.mov

[responsemktg]

@uttej-vsk @samijaber @sidmohanty11 Wondering if you managed to take a look at the example video above? Right now the experience is broken in Vue/Nuxt, and we can't move forward to converting out design library to builder.io, which is a shame.

[sidmohanty11]

@responsemktg apologies for the late reply. Tried this out and you're right it doesn't work. I noticed that we also need to pass a defaultValue: [] to the input type content, ex:

...
inputs: [
      {
        name: "content",
        type: "uiBlocks",
        defaultValue: [], // to send content as a prop
      },
    ],
...

as props don't have content inside it, its unable to update it when we add new blocks.

Also, thanks for the feedback, we have created a Jira ticket to track this issue, I will soon let you know if we have any updates on this.