How to make a wrapper vue component in Solara

Question

I want to create a new vuejs component in Solara that will wrap children. I was hoping the children components will render in the default slot of the component, but this did not happen. How can you make the children components to render inside the vue component?

Example of (not working) code:

<template>
  <div style="background:red; padding:15px">
    I was expecting children to be below:<br>
    <slot />
  </div>
</template>


<script>
export default { } 
</script>

@solara.component_vue("wrapper-cont.vue")
def WrapperCont():
    pass

@solara.component
def Page():
  with WrapperCont():
     solara.MarkDown("child 1")
     solara.MarkDown("child 2")

Iftah · Answer 1 · 2023-06-29T10:13:38.450

The slot mechanism of vuejs isn't used (yet) by Solara.

Instead you need to pass children to your component and render them in a loop using the jupyter-widget component.

Like so:

<template>
  <div style="background:red; padding:15px">
    Children will appear below:<br>
    <jupyter-widget v-for="child in children" :key="child" :widget="child"></jupyter-widget>
  </div>
</template>


<script>
export default { } 
</script>

@solara.component_vue("wrapper-cont.vue")
def WrapperCont(children=[]):   # Note passing children as property
    pass

Note: The solution is currently not documented, so it might be internal API. It was found in Solara source code download.vue, so if it becomes obsolete I suggest to look there for updated solution (and update this answer).

How to make a wrapper vue component in Solara

1 Answers1