Home App Docs Blog Github

Vue.js integration

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.

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;
       }
     },
   },
 };

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

@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.

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.

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.

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

Thank you

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.

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,
    }"
  />