CustomComponents subfolder

General
1

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?

2

Hello @Ischafak,

Welcome to the builder.io 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

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

Register Components for Builder using app.vue

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

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

<script setup>
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
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 Builder.io
const REGISTERED_COMPONENTS = [
  {
    component: Faq1Component,
    name: 'Faq1Component', // Name it whatever you want to refer to it as in Builder.io
    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', () =>
  fetchOneEntry({
    model: 'page',
    apiKey: BUILDER_PUBLIC_API_KEY,
    userAttributes: {
      urlPath: route.path,
    },
  })
);
</script>
3

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

image
image688×556 23.4 KB

i will see faq folder in here right?

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

[
‘image1path’,
‘image2path’,
]

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

4

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

5

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

[
‘https://i.ytimg.com/vi/l3sGtl4g1MI/hqdefault.jpg?sqp=-oaymwEmCOADEOgC8quKqQMa8AEB-AHSBoAC4AOKAgwIABABGGUgZShlMA8=&rs=AOn4CLAgrjNER5-Wt8kk4AUj-sKE7-cbog’,

‘https://i.ytimg.com/vi/l3sGtl4g1MI/hqdefault.jpg?sqp=-oaymwEmCOADEOgC8quKqQMa8AEB-AHSBoAC4AOKAgwIABABGGUgZShlMA8=&rs=AOn4CLAgrjNER5-Wt8kk4AUj-sKE7-cbog’,
]
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’
},
]

6

Hello @Ischafak,

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