Solara•2y ago

Question regarding the `component vue` I

Question regarding the component_vue - I'm trying to create a Box component that will auto scroll to the bottom when children change, but so far I haven't managed to render children in it. I was expecting them to appear in the <slot> of the vue component, but nothing shows up there

11 Replies

IftahOP•2y ago

The python code:

@sl.component_vue("messages-box.vue")
def MessagesBox(auto_scroll):
    pass

@sl.component
def Chat():
    with MessagesBox(auto_scroll=True):
        sl.Markdown("Testing 123")

@sl.component_vue("messages-box.vue")
def MessagesBox(auto_scroll):
    pass

@sl.component
def Chat():
    with MessagesBox(auto_scroll=True):
        sl.Markdown("Testing 123")

And the vuejs messages-box component:

<template>
  <div class="text-center" >
    Auto scroll is {{auto_scroll}}<br>
    I was expecting children to be below:<br>
    <slot />
  </div>
</template>


<script>
export default {
  data: () => ({
    auto_scroll: true,
  }),
}
</script>

<template>
  <div class="text-center" >
    Auto scroll is {{auto_scroll}}<br>
    I was expecting children to be below:<br>
    <slot />
  </div>
</template>


<script>
export default {
  data: () => ({
    auto_scroll: true,
  }),
}
</script>

MaartenBreddels•2y ago

yes, we need to document that, you need to explicitly add the children argument (we should give an error for that), and we should have an example on how to do this! Do you mind opening an issue? there are so many things/questions all of the sudden, it is difficult to keep track 🙂 I do have a trick for you such that you don't need this 🙂 use

with Column(style={"flex-direction": "column-reverse"}):
 ...

with Column(style={"flex-direction": "column-reverse"}):
 ...

Add the children in reverse order, and voila 🙂 i didn't test it, but i know this should work

IftahOP•2y ago

Wow, thats a nice trick! much better than using JS to scroll down all the time! thank you! I figured the children are passed to the component, but I couldn't figure out how to render them from within vue template

MaartenBreddels•2y ago

if you search in the repo, you can probably find it.. <jupyter-widget> tag

IftahOP•2y ago

I can confirm the column-reverse with reveresed messages works great 🙂 I see the jupyter-widget, I'll try it next time I'll make wrapper component I still think the integration will be nicer if you use the Vue.js slot mechanism to just insert the children in the default slot, but maybe I don't see the full picture yet Overall, first day of using Solara and I'm very impressed with the capabilities and also your friendly responsive and helpful support! I'll recommend it to my Python developer friends

MaartenBreddels•2y ago

thank you 🙂 @mariobuikhuizen maybe you have an idea about how to implement <slot> how did you find out about solara?

IftahOP•2y ago

I saw the "Web Apps in Python with Solara — A Streamlit Killer?" in r/python not too long ago, and it seemed very interesting And today I had to do a chat interface for an internal tool at work; usually I would write a full blown frontend+API but figured it is a good opportunity to try the server based UI approach... I googled a bit and found the other article by same author which was near perfect fit for what I wanted. I'm not sure how I ended up finding it today, because I don't think I searched explicitly for Solara, but I'm happy I found it

MaartenBreddels•2y ago

cool, thanks for letting us know

IftahOP•2y ago

Might be a good idea to talk about it in PythonBytes podcast, I'm sure they will love it

MaartenBreddels•2y ago

i think it might be good if you tip them 🙂 ah,also by Michael Kennedy i noticed he followed me 🙂

IftahOP•2y ago

I'll tipped them and also wrote to PyCoder weekly newsletter about Solara 👍

Gaming

Programming

Question regarding the `component vue` I