CustomComponents subfolder

Hi, i have 2 faq component and i want to add subfolder for it in custom components menu.

Faq > faq1Component, faq2Component

i am using nuxt how can i do it?

Hello @Ischafak,

Welcome to the forum.

To achieve this in a Nuxt project, you can organize your components into subfolders and then register them in your Nuxt application. Here’s how you can do it:

Organize Your Components : Place your faq1Component and faq2Component in separate subfolders within your components directory. For example

└── faq/
    ├── faq1Component.vue
    └── faq2Component.vue

Register Components for Builder using app.vue

  <div id="home">
    <div>Hello world from your Vue project. Below is Builder Content:</div>

    <div v-if="content || isPreviewing()">
        page title:
        {{ content?.data?.title || 'Unpublished' }}
    <div v-else>Content not Found</div>

<script setup>
import { Content, fetchOneEntry, isPreviewing } from '';
import { useAsyncData } from '@nuxtjs/composition-api'; // Import useAsyncData from Nuxt Composition API

// Import your FAQ components
import Faq1Component from '~/components/faq/faq1Component.vue';
import Faq2Component from '~/components/faq/faq2Component.vue';

// Register your FAQ components with
    component: Faq1Component,
    name: 'Faq1Component', // Name it whatever you want to refer to it as in
    canHaveChildren: false, // Adjust based on your component's structure
    component: Faq2Component,
    name: 'Faq2Component',
    canHaveChildren: false,

const BUILDER_PUBLIC_API_KEY = 'YOUR API KEY'; // ggignore

const route = useRoute();

// Fetch builder content data
const { data: content } = await useAsyncData('builderData', () =>
    model: 'page',
    userAttributes: {
      urlPath: route.path,

Hi, thanks for answer i will try it. I guess when i write your code

i will see faq folder in here right?

also i want to ask you this i have a prop like this


i need to integrate this to builder io so i need list and file same time how can i do it?

when i try list type it forces me to make array object

Hello @Ischafak,

You will not see the FAQ folder but rather 2 different FAQ components of FAQ.

And regarding the image props, you will create a field type of list and your subfields will be image1path and image2path of file type

Builder.registerComponent(MyComponent, {
  name: 'my component',
  inputs: [
      name: 'images',
      type: 'list',
      subFields: [
          name: 'image1path',
          type: 'file',
          name: 'image2path',
          type: 'file',

To know more, please refer to the below links

thanks, i checked this pages. but i didnt find any answer there.

something like this the urls in here is just image urls.

if i make like yours example the prop becomes like array object as
imagepath: ‘imagepathurl’

Hello @Ischafak,

I don’t think that is supported for the file type, for the string you can use enum type.