Vue.js

Hi everyone! I’m currently trying to evaluate the use of Theia for a project because we need a UI that runs in the browser and that is very extensible. I’m already quite intrigued by Theia but a major problem I see for adoption is that we (15+ developers) only have experience with Vue.js and have already done a lot of prototype work with it that we, due to time constraints, would like to not have to throw away.
From what I can tell, the Theia UI is made with PhosphorJS and React, but as someone who is also relatively new to the world of web development, I was wondering…is there maybe some easy way to use Vue.js components as UI elements in Theia?

[original thread by Alex Ravenna]

PhosphorJS widget don’t have dependencies to React, it is just HTML element (Widget.node) + lifecycle hooks (Widget.on* methods).

For React we extend Widget with ReactWidget, you can extend it with VueWidget in order to integrate vue.js in Widget.node.

See also https://spectrum.chat/theia/dev/anyone-been-succesful-with-integrating-vuejs-based-custom-widget~df449436-effc-46c5-b1de-b4fd3599b31ehttps://spectrum.chat/theia/dev/anyone-been-succesful-with-integrating-vuejsbased-custom-widget~df449436-effc-46c5-b1de-b4fd3599b31e

And https://www.youtube.com/watch?v=T1HDIy7LfFg&t=3s

[Alex Ravenna]

Alright, thanks for the links! Are there any plans to support Vue components (especially single file components) out-of-the-box in the future?

@alexravenna my point was that Theia is not opinionated about UI framework, you can bring your own, we keep React in core because we use it to implement core UI, i don’t think we want to pull another UI framework in core now.

We can though have something like @theia/vue-widget extension under theia-ide organization. It would consist of 2 extensions, one which provide VueWidget and another is a sample how to use it. But someone should implement it, if you or @max-hillaert are interested, i can set it up the project for you, invite to theia-org and provide my feedback on the implementation.