Register components in Vue?

Technical Questions
1

What are you trying to accomplish
Utilize Builder with custom components with Vue. (using @builder.io/vue)

Code stack you are integrating Builder with
Vuejs

How does one register custom components? Trying to use registerComponents() function but doesn’t seem available in the Builder.io: Drag and drop page builder and CMS sdk.

2

Hi @rtuttle,

I would recommend to you our current starters that we have for our Vue SDK :

Vue Starters
Vue SDK Docs

The READMEs of both link to examples that highlight how they are meant to be used.

I hope this is helpful. If you have any further questions, feel free to reach us again!

1 Like
3

Thank you; yes so I changed over to the latest SDK (sdk-vue).

I noticed that the Builder Columns component does not work properly. It creates the columns in the editor and shows an “add block” button for each column. when the button is clicked and a component is chosen (for example, Text) it doesn’t add it to the column but instead to a new row below the Columns component.

Is there a fix to this?

4

Hi @rtuttle,

Thanks for reaching us again!

Well, I have tested the Columns component and it seems working fine to me. I followed the exact instructions mentioned by you. Here’s Columns are inside the parent block. The new row is only created if add something after the parent block.

I feel you click on the “Add block after” of the parent columns block.

image
image1920×1078 126 KB

If you click “Add block after” inside columns then data will add only within columns.

image
image1920×991 119 KB

I hope this adds some clarity, if you still need more help you can share your content link so I can have a look!

Thanks

5

Thank you for your reply and attempting to help with this issue. Actually, I am not clicking on the “Add block after” plus button. I am doing the following steps as shown in the following series of screenshots:

  1. after dragging and dropping the Columns component into the Editor I see this

22squared 2022-08-01 at 2.20.04 PM
22squared 2022-08-01 at 2.20.04 PM1109×424 21.2 KB

  1. Then I click on the “Add block” button in column one:

  2. Then click on the “Text” component button from the dialog that pops open:

22squared 2022-08-01 at 2.20.54 PM
22squared 2022-08-01 at 2.20.54 PM1109×424 21.4 KB

  1. This text component is then added below the Columns area and not within the column itself, as shown here:

22squared 2022-08-01 at 2.21.18 PM
22squared 2022-08-01 at 2.21.18 PM1109×424 13.7 KB

Our content id is d5ed70d67d4d43b1974f52541884b989

6

Hi @rtuttle,

We’re still looking into this. I’ll get back to you asap!

1 Like
7

Hi @rtuttle,

I just wanted to let you know that we have not forgotten about this. We are working on a number of things at the moment and this is in the queue, but I don’t have an eta on when it will be resolved.

I will be sure to keep you updated. In the meantime, please reach out if I can help with anything else.

Thanks

8

Hi @rtuttle , this was a bug with the columns component that was difficult to reproduce but we pushed a fix recently that should correct it. Please update to the latest release (v0.0.1-69) of @builder.io/sdk-vue and give it a try! Let us know if you’re still having issues. Thanks!