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>
2

I’m trying to get the same setup working (Nuxt3) and getting this same problem. The error from nitro is:

WARN [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify a function. You can define your own reducer/reviver for rich types following the instructions in useNuxtApp · Nuxt Composables.

I’ve been trying for hours to get the demo page from the docs up and running but no luck.

In addition, the basic components never load (see image).

image
image685×828 25 KB

Please help! It appears the docs are incorrect for Nuxt?

3

Hey ApeOnFire,

The basic components never loading indicates that Builder cannot connect to your site/local server, so the integration is failing at some point. I’ll review the docs and see if I can reproduce this.