Vue.js integration

[maxime]

Hi, I have issues using builder with Vue.js. I followed the quick start guide. Created a vue component like that

<template>
   <div v-if="notFound">
     <!-- Show your 404 content -->
     Page not found
   </div>
   <div v-else>
     <RenderContent model="page" @contentLoaded="contentLoaded" />
   </div>
 </template>
 
 <script>
 import { builder, RenderContent } from "@builder.io/vue";
 
 builder.init("API_KEY");
 
 export default {
   data: () => ({
     notFound: false,
   }),
   components: { RenderContent },
   methods: {
     contentLoaded(content) {
       if (!content) {
         this.notFound = true;
       }
     },
   },
 };
 </script>

and when I use the editor, when I drag something into the page it does render anything. I added the api key and the @builder.io/vue package. The editing url is the following : http://localhost:8080/builder-editing and the site url in the settings is http://localhost:8080.

[aziz]

I think it might be setting notFound = true when the page is not published yet even while editing/previewing

Try

 import { builder, RenderContent, Builder } from "@builder.io/vue";
 
 builder.init("API_KEY");
 
 export default {
   data: () => ({
     notFound: false,
   }),
   components: { RenderContent },
   methods: {
     contentLoaded(content) {
       if (!content && !Builder.isEditing && !Builder.isPreviewing) {
         this.notFound = true;
       }
     },
   },
 };

[maxime]

Thanks, now I can preview the page but I still can’t edit the content with builder. Do you have an idea why ?

[aziz]

@maxime following up here, I’m able to reproduce, thanks for reporting this issue, I think this could be a legitimate bug, will continue investigation and update here for any findings.

[maxime]

Thanks, we are using the web components full api for the moment like that:

<template>
<div id="app">
<div>
<builder-component
:model="model"
api-key=“API_KEY"
>
</builder-component>
</div>
</div>
</template>

<script>
export default {
data() {
return {
model: "page"
}
},
mounted() {
let params = new URLSearchParams(window.location.search).get("model");
if(params)
this.model = params;

let builderScript = document.createElement("script");
builderScript.async = true;
builderScript.setAttribute(
"src",
"[https://cdn.builder.io/js/webcomponents](https://cdn.builder.io/js/webcomponents)"
);
document.head.appendChild(builderScript);
},
};
</script>

But if you manage to fix the problem we will use it like we were before we found the bug, and we will be able to noTraverse=false to not lazy load symbols because it’s causing us a render problem.
Or maybe that way we can still use the noTraverse=false, but I cant’t figure it out yet.

[aziz]

Hi @maxime , a fix has been merged and released in the latest version of the sdk, to use it make sure you’re on the latest sdk version @builder.io/vue@0.1.10, thanks for reporting this issue.

[maxime]

Ok great, and can you show me where to put noTraverse=false in the code snippet I sent you.

Thank you

[maxime]

Hi Aziz,

Currently we are using Nuxt.js and there’s still the issue about the live page and the draft that are not rendered correctly. But when we use the editor everything is fine and we are able to see the website.

When it will be fixed let me know.

[aziz]

Hi Maxime, We had a bug in our vue sdk affecting interactivity, it’s fixed now in the latest (@buider.io/vue@0.1.11) release:

npm install @bulder.io/vue@latest

For passing noTraverse option pass an options map to the RenderContent:

 <RenderContent
    :key="$route.path"
    model="page"
    @contentLoaded="contentLoaded"
    @contentError="contentError"
    :options="{
      options: {
        noTraverse: false
      }
      url: $route.path,
    }"
  />

[kane]

Hi,

I just found builder.io and thought to give it a try…

I seem to be having a similar issue, except I can’t even add elements via Builder.

The documentation also seems to be missing a step as well — you need to create pages/test-page.vue in addition to creating it in the Builder.io: Visual Development Platform section.

Once I figured that out, I could see my page in the Builder UI. However, I can’t add any elements. See the screenshot below.

Also, even though my page is being shown, I still get a preview error.

I thought it would be simpler than this…