Hi all,
I currently have a Vue.js-based app that I need to turn into a Jupyterlab extension. I really like the Drawio Jupyterlab extension and I need to do something similar in the sense of essentially embedding the app as a Jupyterlab extension. However, I’m struggling to get even a “hello world” Vue file to render as an extension. Literally I spent all day trying to make it work, but to no avail.
I see that there’s a ReactWidget, but analogously I need a VueWidget. If someone has expertise in this and can help point me in the right direction to even get a “Hello World” Vue file to render as a widget, I’d greatly appreciate it! Seeking boilerplate code!
Thanks in advance.
I believe that I heard @jasongrout mention there were cookiecutters of jupyterlab extensions…maybe he knows of one for this use-case?
Yes, there is the extension-cookiecutter that provides a generic template for Jupyterlab extensions; however, there isn’t any specific support for Vue. @jasongrout if you have any insights for how to render a basic Vue.js file as the widget, it would be much appreciated.
Unfortunately another day gone and I’m still unsuccessful in getting it to work.
I saw that in the DrawIo extension they are copying files into the lib folder using:
I’m trying to copy Vue files into the lib folder, and it works locally in the sense that I can see the Vue files get copied into a local lib/ directory, but when I check the Jupyter-created lib folder at
/usr/local/Cellar/python/3.6.5_1/Frameworks/Python.framework/Versions/3.6/share/jupyter/lab/staging/node_modules/my_widget_name/lib, they aren’t copied over. Is there something else that I need to do in order to get Jupyter to copy those files over?
I also tried replacing “tsc” with “webpack” as the build script in package.json for compiling the project by having webpack output an index.js file the same as tsc, but despite there being no errors, the extension is not rendered.
Just a note that a bunch of Jupyter lab folks are at scipy so may not be checking up online, you could also ask around in the Jupyter lab repositoritory!
Thanks for the info @choldgraf
I now figured out how to render a HelloWorld.vue as the extension by copying Vue files into the lib directory, but I had to modify the JupyterLab webpack and package.json, which isn’t a real solution.
I’m still struggling with getting webpack to create a working extension javscript bundle. If I take the cookiecutter and create the index.js/plugin.js file using webpack, it doesn’t run.
I opened an issue on GitHub here for the issue: https://github.com/jupyterlab/extension-cookiecutter-js/issues/27
I just wanted to provide an update to close this thread.
I was able to resolve these issues and I made a JupyterLab extension using Vue.js, and for anyone else that may be look to do the same in the future I put together a repository here: https://github.com/nscozzaro/jupyterlab_vue
If you switch branches from master to jupyterlab_apod_webpack (https://github.com/nscozzaro/jupyterlab_vue/tree/jupyterlab_apod_webpack) I included a basic example of how you can reconfigure the current tutorial (jupyterlab_apod) to build using webpack instead of tsc, which was the first step to getting Vue to work as an extension.
I’m happy to fix any issues you come across if you test it out.
2 Likes
This is great, thanks so much for posting your solution!