S
Solara

general

Question regarding the `component vue` I

IIftah6/28/2023
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 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>
MMaartenBreddels6/28/2023
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
IIftah6/28/2023
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
MMaartenBreddels6/28/2023
if you search in the repo, you can probably find it.. <jupyter-widget> tag
IIftah6/28/2023
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
MMaartenBreddels6/28/2023
thank you 🙂 @mariobuikhuizen maybe you have an idea about how to implement <slot> how did you find out about solara?
IIftah6/28/2023
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
MMaartenBreddels6/28/2023
cool, thanks for letting us know
IIftah6/28/2023
Might be a good idea to talk about it in PythonBytes podcast, I'm sure they will love it
MMaartenBreddels6/28/2023
i think it might be good if you tip them 🙂 ah,also by Michael Kennedy i noticed he followed me 🙂
IIftah6/28/2023
I'll tipped them and also wrote to PyCoder weekly newsletter about Solara 👍

Looking for more? Join the community!