Example vue component using `<script setup>` pattern?
There are numerous helpful templates in solara's vue components. However, they all use the Options API, including in the
vuetify and ipyvuetify documentation.
Can you provide an example Composotion API example that shows how to expose data attributes, calling JS functions, etc.? Does it all work the same way?
Thanks for the amazing library, by the way!9 Replies
On a followup note, typescript integration would also be great to see in a demo component. It is a nightmare maintaining a 500-line untyped JS vue component 😅
Justification: As a python dev, it is difficult to understand how to port logic to JS without a starting template. The existing solara components are an immensely helpful starting point, but the Composition API with
<script setup> seems to be recommended for newer Vue components (https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api). However, there are no solara components designed this way to use as a reference.Vue.js
Vue.js - The Progressive JavaScript Framework
Hi @ntjess , ipyvue[tify] is based on Vue[tify] 2, the composition API was introduced in Vue3. We've started working on a Vue3 version of ipyvue[tify] and an alpha relaase is available (ipyvue==3.0.0a2 and ipyvuetify==3.0.0a2). However, I just found out the composition API is not yet working. I think I can fix it fairly quickly if you're interested in trying the alpha version. I can then also create an example. Everything will still work the same, but with the new Vue3 syntax (and the new feature of being able to load esmodules). Note that the data binding will still be done with the options API internally.
I've released a new alpha version of ipyvue, which has support for
setup() and <script setup>. Minimal demo: https://py.cafe/mariobuikhuizen/vue3-script-setupPyCafe - Solara - Vue3 script setup Demo
Create & Share Streamlit, Dash and Python Apps Online.
Thanks for the update! Do you know if this will also support TypeScript?
My goal would be to use this pattern for the PDF preview widget (https://github.com/widgetti/solara/pull/693) when it is placed in a contrib package
GitHub
Pdf preview component by ntjess · Pull Request #693 · widgetti/sola...
Fast PDF previewing using solara 🤝 pdf.js. I adapted the example here to work as a vue component.
In the future, we can enable the search bar (commented out currently), annotations, etc. But this m...
Yeah, I think it's possible, I will also see if I can get that working.
Another demo with esm imports: https://py.cafe/mariobuikhuizen/vue3-script-setup-esm
PyCafe - Solara - Vue3 script setup Demo with esm imports
Create & Share Streamlit, Dash and Python Apps Online.
Beautiful! Thanks for putting together these examples
Note that the data binding will still be done with the options API internally.Does this present any limitations/constraints? Or conceptually can we still think about the vue component as a Composition?
yeah, I just found out I couldn't access the poperties in
data from <script setup>. Maybe I can make it optional to use Composition for the databinding.v3.0.0alpha4 now supports typescript. Example: https://py.cafe/mariobuikhuizen/vue3-script-setup-ts
PyCafe - Solara - Vue3 typescript script setup Demo
Create & Share Streamlit, Dash and Python Apps Online.