# How to add editable blocks to custom components in vue 3

**URL:** <https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762>\
**Category:** CMS\
**Tags:** visual-editor, vuejs\
**Created:** [January 9, 2024, 9:36am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762 "2024-01-09T09:36:02Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![behzad](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@behzad](https://forum.builder.io/u/behzad)\
**Post date:** [January 9, 2024, 9:36am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/1 "2024-01-09T09:36:02Z")

</div>

Hi,  
I’m trying to make my custom components editable blocks so they can be edited in the visual editor but i cant find any documentation for this.

---

<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:** [January 9, 2024, 10:24am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/2 "2024-01-09T10:24:23Z")

</div>

Hello @behzad,

Welcome to the [Builder.io](http://Builder.io) forum.

You can find assistance in the following articles:

1. [Builder.io](http://Builder.io) Documentation on Custom Components with Children: [Custom Components with Children](https://www.builder.io/c/docs/custom-components-children)
2. Vue.js Guide on Components and Slots: [Vue.js Components and Slots](https://vuejs.org/guide/components/slots.html)

---

<div class="post-metadata">

**Author:** ![behzad](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@behzad](https://forum.builder.io/u/behzad)\
**Post date:** [January 9, 2024, 10:29am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/3 "2024-01-09T10:29:11Z")

</div>

Thanks for replying, but there is no vue documentation on this page, all of the docs and tutorials on the forum are written in react.

---

<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:** [January 9, 2024, 10:46am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/4 "2024-01-09T10:46:14Z")

</div>

Hello @behzad,

Most of our documents are currently tailored for React, and we’re actively working on updating our documentation to encompass other tech stacks. Your feedback is greatly appreciated.

In the interim, if you’re using a custom component in Vue, you can refer to the documents shared earlier. Additionally, you can find an example of using slots on our GitHub repository.

> <https://github.com/BuilderIO/builder/blob/main/examples/vue/vue-3/src/components/HelloWorld.vue>

Feel free to explore these resources, and if you have any further questions or suggestions, we’re here to assist.

Thanks,

---

<div class="post-metadata">

**Author:** ![behzad](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@behzad](https://forum.builder.io/u/behzad)\
**Post date:** [January 9, 2024, 11:08am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/5 "2024-01-09T11:08:02Z")

</div>

Thanks again for replying,  
This vue repository was great and helped me a lot, but the main problem i have is that i cant edit the text and image elements in my custom components like the builder elements. is there any way to make them like the [builder.io](http://builder.io) blocks and not only a text input?

---

<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:** [January 9, 2024, 11:20am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/6 "2024-01-09T11:20:51Z")

</div>

Hello @behzad,

As of now, using child blocks in custom components in Vue is not currently supported. However, I can provide you with a general example of how you might use child blocks in custom components in Vue 3.

Let’s assume you have a custom component named `ParentComponent` that can contain child components. Here’s a basic example:

```auto
<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <!-- Child components will be rendered here -->
    <div class="child-components">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
};
</script>

```

In this example, the `ParentComponent` has a `<slot>` where child components can be inserted. Now, let’s create a child component:

```auto
<!-- ChildComponent.vue -->
<template>
  <div class="child-component">
    <h2>Child Component</h2>
    <!-- Your child component content goes here -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
};
</script>

```

Now, you can use these components in another Vue file:

```auto
<!-- App.vue -->
<template>
  <div id="app">
    <ParentComponent>
      <!-- Child components go here -->
      <ChildComponent>
        <!-- Content of the first child component -->
        <p>Content of the first child component</p>
      </ChildComponent>

      <ChildComponent>
        <!-- Content of the second child component -->
        <p>Content of the second child component</p>
      </ChildComponent>
    </ParentComponent>
  </div>
</template>

<script>
import ParentComponent from './components/ParentComponent.vue';
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: {
    ParentComponent,
    ChildComponent,
  },
};
</script>

```

> **[Input types for custom components - Builder.io](https://www.builder.io/c/docs/custom-components-input-types)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![behzad](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@behzad](https://forum.builder.io/u/behzad)\
**Post date:** [January 9, 2024, 1:07pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/7 "2024-01-09T13:07:05Z")

</div>

I think you misunderstand me, let me show you the problem with a picture:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/aa89809c64cf7f0976c58f2359734c81c58906cc.jpeg)

in the picture the first block is inserted from [builder.io](http://builder.io) template and text elements and images are editable, but the second block is a custom component and nothing can be edited even the text elements.

---

<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:** [January 9, 2024, 1:18pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/8 "2024-01-09T13:18:01Z")

</div>

Hello @behzad,

I’ve got your point, to clarify further, you will create a parent component that will use child components which will be basically the default type of builder sdk elements utilizing defaultChildren

Add `<slot></slot>` wherever you want your children to be. For more details, visit the [Vue document on Slots](https://vuejs.org/guide/components/slots.html).

Example:

```auto
// Register your Builder components
const REGISTERED_COMPONENTS = [
  {
    component: HelloWorldComponent,
    name: 'Hello World',
    canHaveChildren: true,
    inputs: [
      {
        name: 'text',
        type: 'string',
        defaultValue: 'Hello World',
      },
    ],
    defaultChildren: [
      { 
        '@type': '@builder.io/sdk:Element',
        component: { name: 'Text', options: { text: 'I am child text block!' } }
      }
    ],
  },
];

```

**HelloWorld.vue**

```auto
<template>
  <div class="hello-world">
    <div class="text">Hello {{ text }}!</div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'world',
    },
  },
};
</script>

<style scoped>
.hello-world {
  display: flex;
  flex-direction: column;
}
.text {
  padding: 50px;
}
</style>

```

 ![Screenshot 2024-01-09 at 6.47.41 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b6938558b6cb1e8ae4806852c3f6fe6b3652b814.png)

---

<div class="post-metadata">

**Author:** ![behzad](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@behzad](https://forum.builder.io/u/behzad)\
**Post date:** [January 9, 2024, 1:34pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/9 "2024-01-09T13:34:06Z")

</div>

okay so for example we cant edit the vue logo image that is coming from the parent component?

---

<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:** [January 9, 2024, 1:44pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/10 "2024-01-09T13:44:17Z")

</div>

@behzad Yes, you can register the logo as a custom component with a default value using .

---

<div class="post-metadata">

**Author:** ![behzad](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@behzad](https://forum.builder.io/u/behzad)\
**Post date:** [January 10, 2024, 10:19am UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/11 "2024-01-10T10:19:35Z")

</div>

this is my custom component that im importing and i have zero control on the elements inside the component expect i can make the props and only pass a value to them and cant even change the pictures inside my components, so what problem [builder.io](http://builder.io) is solving when i cant use my custom components with ease? i mean when i import a template from figma i have full control on every element on it so why not in custom components?

```auto
<script setup lang="ts">
const props = defineProps<{
  title: string
  description: string
  description2: string
}>()
</script>

<template>
  <div class="services-view top-services bg-light-gray py-lg-5">
    <div class="container py-5">
      <div class="row col-12 px-0 mx-auto">
        <div class="col-lg-6 px-0 px-lg-3">
          <div class="service d-block p-4 p-lg-5 text-center bg-white text-dark-blue mb-3">
            <span class="text-semi-bold my-0">Pricing List</span>

            <h2 class="fs-32 mt-1">{{ props.title }}</h2>

            <p class="fs-18">
              {{ props.description }}
            </p>

            <a
              class="btn-primary-red text-white mx-auto w-max-content px-5 py-2 mt-5"
              href="https://dashboard.1gbits.com/deploy/dedicated"
              target="_blank"
              title="1Gbits all dedicated servers listing"
              >View All</a
            >
          </div>
        </div>

        <div class="col-lg-6 px-0 px-lg-3">
          <div class="service d-block p-4 p-lg-5 text-center bg-white text-dark-blue mb-3">
            <span class="text-semi-bold my-0">Pricing List</span>

            <h2 class="fs-32 mt-1">1Gbits Virtual Private Servers Prices</h2>

            <p class="fs-18">
              {{ props.description2 }}
            </p>

            <a
              class="btn-primary-red text-white mx-auto w-max-content px-5 py-2 mt-5"
              href="https://dashboard.1gbits.com/deploy/vps"
              target="_blank"
              title="1Gbits Virtual Private Servers Prices"
              >View All</a
            >
          </div>
        </div>

        <slot></slot>
      </div>
    </div>
  </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![faz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/faz/32/3375_2.png) [@faz](https://forum.builder.io/u/faz)\
**Post date:** [February 7, 2024, 4:28pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/12 "2024-02-07T16:28:58Z")

</div>

It looks like the builder vue sdk doesn’t support the `defineProps` macro that vue uses for typescript. Currently this is the only blocker keeping me from using builder. For clarification-

These two work:

```auto
<script lang="ts">
export default {
  props: {
    heading: {
      type: String,
      required: true,
    },
  },
}
</script>

OR

<script lang="ts" setup>
defineProps(['heading'])
</script>

```

This does not:

```auto
<script lang="ts" setup>
 defineProps<{
   heading: string
 }>()
</script>

```

---

<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:** [February 9, 2024, 4:20pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/13 "2024-02-09T16:20:57Z")

</div>

Hello @faz,

The [Builder.io](http://Builder.io) Vue SDK currently does not fully support the `defineProps` macro that Vue uses for TypeScript. Until this feature is supported by the [Builder.io](http://Builder.io) Vue SDK, you might need to stick with one of the two approaches you mentioned. Alternatively, you can submit feature requests at [Builder.io Ideas](https://ideas.builder.io/ideas/).

---

<div class="post-metadata">

**Author:** ![faz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/faz/32/3375_2.png) [@faz](https://forum.builder.io/u/faz)\
**Post date:** [February 9, 2024, 6:10pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/14 "2024-02-09T18:10:27Z")

</div>

Thanks, I have added this here: [Support defineProps for TS in vue 3 sdk | Builder.io Ideas](https://ideas.builder.io/ideas/PROD-I-381)

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [April 5, 2024, 7:41pm UTC](https://forum.builder.io/t/how-to-add-editable-blocks-to-custom-components-in-vue-3/4762/15 "2024-04-05T19:41:19Z")

</div>

Wanted to update this thread that child blocks for custom components in Vue, and indeed most of all our SDKs is now fully supported. You can see the current support of Builder functionality by SDK here: [SDK Comparison - Builder.io](https://www.builder.io/c/docs/sdk-comparison)