S
Solara16mo ago
Iftah

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