Adding custom components to a vanilla html (and/or PHP) page using sdk-vue's browser module build

Technical Questions
, ,
1

Builder content link

Builder public api key
9c477fefb92c46b68a5bd05ea08879e8

What are you trying to accomplish
I successfully integrated the Builder.io Visual Editor on a vanilla html/JS/Vue.js page using a Vue.js instance & the browser build of @builder.io/sdk-vue. See this previous post how to do this. In this case I just used plain html, but the same principle can be used for other server-side pages like PHP pages.

The issue is that I’d like to use my Vue.js components as custom components in my Builder content sections. But my Vue.js components don’t appear as custom components in Builder.io’s Visual Editor.

I created a basic Builder.io CMS vanilla html & JS demo project on StackBlitz.

When you download this project from StackBlitz and extract it to a local folder, you can easily run it locally after issuing a npm install and a npm start. When you use your localhost url as your preview url in Visual Editor, you’ll notice that my custom component does not appear in Visual Editor for adding to Builder.io content.

You’ll notice that the Builder content works fine in a browser however, only custom components do not appear in Visual Editor. I debugged this and tried every possible solution for days but it seems the Visual Editor doesn’t recognise custom components when using the browser esm build of sdk-vue.

When I create a small Vue.js demo project using npm create vue@latest with a custom component, this works fine: my custom component immediately appears for adding to content in the Visual Editor.

I’m thinking that the Visual Editor doesn’t find my custom components on a vanilla html page when using the browser build as a script module. However debugging with Chrome’s devtools, there is not so much difference between a vanilla html page and a Vue.js project served by a npm run dev Node.js instance.

Maybe someone has a clue about what’s going wrong? As the sdk-vue provides a browser build, I suppose it must be possible to get custom components working in a vanilla html page setup too.

Code stack you are integrating Builder with
vanilla html/js, Vue.js

Reproducible code example
The same demo project is also on CodeSandbox

2

Hi, I retried with different options but I still can’t use custom components in the Visual Editor (they don’t appear in the insert menu) on a vanilla html & JS page. Does anyone (@manish-sharma ?) have a clue why the Visual Editor doesn’t “see” a custom component registered in a vanilla html page as in my example?

I updated my example code on StackBlitz (or CodeSandbox) to keep the html page as simple and basic as possible.

When I try a similar example created with npm create vue@latest, this works immediately in the Visual Editor: my custom component appears immediately in the insert menu and I can add my component to my Builder content in the Visual Editor.

Custom components are a very important feature when I want to use the Builder.io CMS in our existing retail website project.

Thanks in advance for any help or clues!

3

Hello @wdbacker,

We are working on reproducing this on our end using your shared code, and you can expect an update shortly.

Thanks,

4

Hi @manish-sharma did you manage to reproduce this issue with the sample code last week? If I can add more information or help with debugging, don’t hesitate to let me know, thanks!

5

Hi @manish-sharma is there any update on this issue? Thanks!

6

Hello @wdbacker,

We currently have no updates on this issue. I can reproduce the problem on our end, and we are discussing it internally to determine the next steps. We will update you as soon as we make any progress.

Thank you,