[Vuejs]-How to make a wrapper vue component in Solara

by

1👍

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).

👤Iftah

Leave a comment