Genie Discord forum

I have a Vue single-file component (.vue) file that I would like to be able to use in Stipple. What is the process for registering the file and component with stipple? Thanks for your help 🙂

why would you want to mix .vue with stipple. What's the use case?

You can build entire vuejs app and use Genie as backend?

Yes, exactly. I would like to leave the Quasar, Vue and JavaScript in that world (the documentation is easier to dig into there and I can more easily decompose the project into sub-components) and then import one top-level component into Stipple that would expose specifically the observables that the Julia backend really needs to manipulate.

you can create your vue udm app and use serve_static to render that

Like for example this: https://github.com/GenieFramework/GeniePackageManager.jl/blob/master/views/index.html

served here: https://github.com/GenieFramework/GeniePackageManager.jl/blob/55dfc2f4e90d1c79dfb6b2feedfb16d6ea976f86/src/GeniePackageManager.jl#L34-L37

and you can write StipplePage.jl and render than with html and serve it from another route

like this server dashboard.jl which is then served by route https://github.com/GenieFramework/PkgVizBoard/blob/107ea3011e29dfa885dd6df5b3964bb819b4b3c7/app/resources/dashboard/DashboardController.jl#L9-L11

Technically all of this should work

I am however not sure about rendering .vue components

you'll have to create frontend separately. Use node to serve frontend

and use genie backend for data/api

like traditionally how it's done

Thanks Abhi! I think I understand and will try this out.

Actually, a quick question. How would I connect the Stipple observables to specific variables in the vue udm app? In Stipple, it seems you need to place julia macros into the UI code. I don't see how to do that if I just pull in the entire vue udm app.

I don't understand what do you mean by connecting to Stipple Observables to VueUDM

What I proposed was building some pages in VueUDM and some pages in Stipple.jl

Not missing both in one page and using Genie to render those VueJS UDM and Stipple pages

Hi there ! I'm also currently very interested in using custom Vue components along with Genie.

@abhimanyuaryan , as I understand your previous responses, it is not possible to use the GenieFramework reactive API to manage the reactive variables of arbitrary Vue components.

I'm however confused regarding the limit of applicability of the reactive model (as is @eli it seems). GenieBuilder, for example, writes html style views, so how is it not possible to insert a custom vue component here, and manage its reactive properties using the GenieFramework API ?

A broader question would perhaps be : Is there any mean to interact work with arbitrary Vue reactive properties using a Julia back-end, to circumvent having to rely on javascript too much ?

you can use vue components with genie. Not sure about mixing those components in Stipple reactive pages

this is serving a vue file: https://github.com/GenieFramework/GeniePackageManager.jl/blob/a729668591c683bc79f896a2a7a9baa6c8d2bfda/src/GeniePackageManager.jl#L16

https://github.com/GenieFramework/GeniePackageManager.jl/blob/master/views/index.html

also you build your frontend with vue create all the components in .vue files and use genie as backend