Nuxt v4 - General issues with custom components

Bugs
1

I’ve succesfully integrated builder.io into my Nuxt v4 project.
But I have some issues with my custom components.

  1. Clicking on the component in the preview does not open/select the component, it works for default components without any issues.
  2. You cannot add child components via the preview and there is no visual indicator either.
  3. Elements with 100vh etc. make it unable to scroll in the preview.
  4. The override feature doesn’t seem to work at all

It generally seems as if the it doesn’t work that well with custom components.

2

Hello @creinelt,

We attempted to reproduce the issue on our end; however, we have not been able to replicate it. Both drag-and-drop and selecting custom components appear to be working as expected in our test environment. Based on what we’ve seen so far, we suspect the cause may be related to dependencies or integration specifics in your setup.

Below is the code we tested with for reference:

<!-- pages/[...app].vue -->

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

const route = useRoute();

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

// Get the path, ensuring root path is handled correctly
const urlPath = route.path === '/' ? '/' : route.path;

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

// Check if we should show content
canShowContent.value = content.value ? true : isPreviewing(urlPath);

// Method to get registered components
const getRegisteredComponents = () => {
  return registeredComponents;
};
</script>

<template>
  <div v-if="canShowContent">
    <Content 
      :api-key="apiKey" 
      :model="model" 
      :content="content" 
      :customComponents="getRegisteredComponents()"
    />
  </div>
  <div v-else>
    <div class="min-h-screen flex items-center justify-center bg-gray-50">
      <div class="text-center">
        <h1 class="text-2xl font-bold text-gray-900 mb-4">Content Not Found</h1>
        <p class="text-gray-600 mb-4">No Builder.io content found for this page.</p>
        <p class="text-sm text-gray-500">Path: {{ route.path }}</p>
        <p class="text-sm text-gray-500">URL Path: {{ urlPath }}</p>
        <p class="text-sm text-gray-500">Content: {{ content ? 'Found' : 'Not found' }}</p>
        <p class="text-sm text-gray-500">Preview Mode: {{ isPreviewing(urlPath) ? 'Yes' : 'No' }}</p>
      </div>
    </div>
  </div>
</template>

You can view the complete example here:

GitHub - Manish-Builder-io/Nuxt4-Builder-App: Nuxt4 Builder.io App

We recommend comparing this implementation with your own to identify any differences in dependencies, imports, or configuration. We’re continuing to look into possible causes and will keep you updated.

Hope this helps!

Thanks,

1 Like
3

There could be potential issue with override, we are investigating the issue internally and we will keep you updated.

1 Like
4

Thanks, i checked that everything is up to date and as close as possible to your example.
But the issues still persist.

There are some Warnings in the Browser Console inside of the visual builder:

[mobx.array] Attempt to read an array index (1) that is out of bounds (1). Please check length first. Out of bound indices will not be tracked by MobX

[Vue warn]: Failed setting prop “attributes” on : value [object Object] is invalid. TypeError: Cannot set property attributes of # which has only a getter

[Vue warn]: Failed setting prop “attributes” on : value [object Object] is invalid. TypeError: Cannot set property attributes of # which has only a getter

5

Found the issue, it was the noWrap attribute i used for all of them.

1 Like