SOLVED: Nestable API - Missing Vue component?

Developers
1

I’m just going off the documentation, as the Nestable API version hasn’t been released, but in the docs there’s no mention of using nested elements when using the render_builder() function to output the element as a Vue template inside of the builder.

I thought there’d be some type of new component to add in that will allow us to show the nested child elements inside the vue template?

Something like…

<component class="my-element">
	<div 
		class="some-inner-structure"
	></div>

      / *  some component to show nested elements */
    <component/>

</component>

Otherwise, it looks like we wouldn’t be able to use Vue for building components for the builder, if we wanted them nestable. (i’m thinking there may be potential Builder performance issues if users nesting lots of elements, ie would all the elements inside need to keep re-rendering when the settings are changed on the element? ideally it would just behave as a regular container to hold the inner elements in many cases)

6 Likes
2

We need something like this
Screenshot 2022-07-06 at 11.18.38 PM

Zion is using the “SortableCotent” tag (with extra property like element.id, element object, etc) and the Vue for nestable items.

Currently, the full page is refreshing when I am changing the control options of the nestable element. If we implement the Vue JS, i think that page will not refresh/reload.

6 Likes
3

@wplit Thank you so much for mentioning the nestable Vue component. I’ve just added this information to the Academy article.

The <bricks-nestable :element="element/> component allows you to render all elements inside your custom nestable element inside.

Note: In the current 1.5-beta I think you need to pass down the “index” prop as well (can just be 0). This won’t be necessary in the 1.5 stable release. Just so you know, in case your nestable x-template throws an error. Fortunately Vue errors are actually helpful & easy to understand :grinning:

2 Likes