It would work in a vue.js app or only vuetify?

[dea398]

Hi, I would like to use voila in a vue.js app. I haven't tried yet but let me ask you if it is possible to do that

[mariobuikhuizen]

It is possible to do that. example_site/voila-embed.js should be adapted to not use vuetify. Your vue.js app should include example_site/voila-embed.js and use the jupyter-widget-embed component:

<jupyter-widget-embed
    voila-url="<voila-url>"
    notebook="<notebook>.ipynb"
    mount-id="<mount-id>"
></jupyter-widget-embed>

to mount widgets from Voila.

[dea398]

Thanks. Sorry to bother you but If I am using vue component where should I load the voila-embed.js (main.js or in the script area of the myComponent.vue or in the App.vue) or and how ? . I am new to vue and web development. I'm coming from c#/c++ and web tech have been changed a lot.

[dea398]

Hi, now I know where to use external js in vue. I am able to make a leapMotion work in vue.js. But, before to try an adaptation voila-embed.js for vue.js I need to make it work with your example. But it wont work. I am just opening the html file and it doesn't work. Do I need to do something else?.

What I understood is that I can use it in any existing web page and without launching a jupyter server. I understand it well? I am using vue.js + flask + vscode

[mariobuikhuizen]

Thanks. Sorry to bother you but If I am using vue component where should I load the voila-embed.js (main.js or in the script area of the myComponent.vue or in the App.vue) or and how ? . I am new to vue and web development. I'm coming from c#/c++ and web tech have been changed a lot.

This is probably not a beginner friendly task. It also depends on the structure/stack used on your project. The difficulty mainly lies in combining a module loader (used in Voila) and a module bundler (probably and rightly so, used in your project). Even if I knew the structure/stack used on your project, I couldn't answer this off the top of my head.

What I understood is that I can use it in any existing web page and without launching a jupyter server. I understand it well? I am using vue.js + flask + vscode

You still need the Voila server (instead of the jupyter server) for starting kernels and running notebooks in them. Maybe you could first try to get the example described in the readme running.