Preview Load Error on Nuxt 3

Visual Editor Help
1

Getting Previou Load Error even when the page is loaded. In this screenshot you can see that the preview is loaded:

image
image2241×1199 257 KB

Here is the code of this page:

<!-- pages/landing/[slug].vue -->

<script setup>
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
import { ref } from 'vue';

const route = useRoute();

// TO DO: Add your Public API Key here
const apiKey = 'xxxxxxxxxx';
const canShowContent = ref(false);
const model = 'page';

const { data: content } = await useAsyncData('builderData', () =>
    fetchOneEntry({
        model,
        apiKey,
        userAttributes: {
            urlPath: route.path,
        },
    })
);

canShowContent.value = content.value ? true : isPreviewing(route.path);
</script>

<template>
    <div v-if="canShowContent">
        <Content :api-key="apiKey" :model="model" :content="content" />
    </div>
    <div v-else>Content not Found</div>
</template>

I have masked the apiKey in the above code.

What could be wrong?

2

Hey @azharumar I am able to get this code working. It looks like your routing is not set correctly. Could you please share your folder structure with me? You can use our github repo as an example to set up your routing.