# Nuxt v4 - General issues with custom components

**URL:** <https://forum.builder.io/t/nuxt-v4-general-issues-with-custom-components/15618>\
**Category:** Bugs\
**Tags:** visual-editor\
**Created:** [August 15, 2025, 9:17am UTC](https://forum.builder.io/t/nuxt-v4-general-issues-with-custom-components/15618 "2025-08-15T09:17:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![creinelt](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/creinelt/32/5176_2.png) [@creinelt](https://forum.builder.io/u/creinelt)\
**Post date:** [August 15, 2025, 9:17am UTC](https://forum.builder.io/t/nuxt-v4-general-issues-with-custom-components/15618/1 "2025-08-15T09:17:20Z")

</div>

I’ve succesfully integrated [builder.io](http://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.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 15, 2025, 12:01pm UTC](https://forum.builder.io/t/nuxt-v4-general-issues-with-custom-components/15618/2 "2025-08-15T12:01:58Z")

</div>

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:

```auto
<!-- 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](https://github.com/Manish-Builder-io/Nuxt4-Builder-App.git)

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.

https://www.loom.com/embed/7877557a2ef6461f93fa7ee2fb4992b8?sid=186842b3-11ca-4b63-b171-43a8e0660121

Hope this helps!

Thanks,

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 15, 2025, 12:10pm UTC](https://forum.builder.io/t/nuxt-v4-general-issues-with-custom-components/15618/3 "2025-08-15T12:10:13Z")

</div>

> [@creinelt](#):
>
> 1. The `override` feature doesn’t seem to work at all

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

---

<div class="post-metadata">

**Author:** ![creinelt](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/creinelt/32/5176_2.png) [@creinelt](https://forum.builder.io/u/creinelt)\
**Post date:** [August 15, 2025, 2:01pm UTC](https://forum.builder.io/t/nuxt-v4-general-issues-with-custom-components/15618/4 "2025-08-15T14:01:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![creinelt](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/creinelt/32/5176_2.png) [@creinelt](https://forum.builder.io/u/creinelt)\
**Post date:** [August 15, 2025, 7:02pm UTC](https://forum.builder.io/t/nuxt-v4-general-issues-with-custom-components/15618/5 "2025-08-15T19:02:39Z")

</div>

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