search

mariobuikhuizen / voila-embed

Embed jupyter widgets in existing websites
Other
52 stars 7 forks source link

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

Open dea398 opened 4 years ago

dea398 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.