I was attempting to create a section for my homepage. The visual editor is not behaving.
Builder content link
Builder public api key
d9a9ca76e71742dcbbc918da9ba7ba3a
What are you trying to accomplish
I am trying to use the visual editor. It is not responding to any items that I add to the canvas. I have to keep refreshing the screen. Not a great experience.
Screenshots or video link
Code stack you are integrating Builder with
Nuxt3
Reproducible code example
I have lifted this from the docs.
<template>
<div id="home">
<div>Hello world from your Nuxt 3 project. Below is Builder Content:</div>
<div v-if="canShowContent">
<div>
Page title:
{{ (content?.data?.title) || 'Unpublished' }}
</div>
<Content
:model="page"
:content="content"
:api-key="apiKey"
/>
</div>
<div v-else>Content not Foundsss</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Content, isPreviewing, fetchOneEntry, getBuilderSearchParams } from '@builder.io/sdk-vue';
const runtimeConfig = useRuntimeConfig()
const apiKey = runtimeConfig.public.builderIoKey;
const route = useRoute();
const urlPath = computed(() => `/\$\{route.params.slug.join('/')\}`);
const content = ref(null);
const canShowContent = ref(false);
// Fetch the Builder content for the page that matches the URL path
try {
const response = await fetchOneEntry({
model: 'homepage',
apiKey,
userAttributes: {
urlPath: urlPath.value,
},
options: getBuilderSearchParams(route.query)
});
content.value = response;
canShowContent.value = content.value || isPreviewing();
} catch (error) {
console.error('Builder content not found:', error);
if (process.server) {
// Set the HTTP response status code to 404 if no content is found
const nuxtApp = useNuxtApp();
nuxtApp.ssrContext.event.res.statusCode = 404;
}
}
</script>