Nuxt: No content is loaded / [nuxt] Failed to stringify dev server logs

Technical Questions
1

I’ve followed the docs like described here: Integrating Pages - Builder.io

However: Nothing is loading on my localhost page.

I am not sure why nothing is loaded, I would appriciate any help and feedback - Thank you :pray:

Builder public api key
f26ce3f172e247d498b5c25e90861046

What are you trying to accomplish
Setting up builder.io and connect pages

Screenshots or video link

content not found
image

image
image2022×1129 122 KB

app.vue
image

pages/[…app].vue

image
image1151×1194 68.9 KB

Nodejs error

image
image1114×1192 39 KB

Code stack you are integrating Builder with
Nuxt

Reproducible code example
I’ve created an pages/[...app].vue with the following code:

<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 Found</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';

// TODO: enter your public API key
const apiKey = 'f26ce3f172e247d498b5c25e90861046';

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: 'page',
    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>