Frontend: upgrade to vue 3

[stritti]

Currently we use vue.js v2 in combination with BoostrapVue. BootstrapVue does not support vue3.

• Check how to do migration to vue3 without loosing functionality.
• How could lac of compatibility of BoostrapVue be solved
• There are several components which have to be verified and probably replaced/updated.

See also #212

[stritti]

I think biggest issue will be BoostrapVue. There is already a fork for vue3 but not everything is supported currently: bootstrap-vue/bootstrap-vue#5196

Progress seems to be low on that within the project.

[stritti]

We should analys if this fork is worth to be used or if we should switch to another vue3 compatible UI framework.

[ravihidayat]

The freshest fork seems to not be maintained anymore. I am not sure about this, but I think we should consider talking about alternatives.

[stritti]

Yes, that is also my impression. Any suggestions for alternatives, @ravihidayat, @chrisWolter ?

[stritti]

If we switch to another ui framework, we have to verify that it supports

• vue 3
• vue-i18n
• responsive layout for mobile
• could be themed

Beside technical requirements we have to be as sure as possible that the ui framework is maintained in future and has a active community.

[ravihidayat]

@stritti Apparently these are the promising ones:

1. https://github.com/cdmoro/bootstrap-vue-3 (A fresh fork of BootstrapVue, looks well-maintained)
2. https://github.com/primefaces/primevue (Also well-maintained, as well as customizable)

Let me know if you have other suggestions in mind.

[stritti]

@ravihidayat Many thanks for your proposals. IMHO PrimeVue would be a good base. The community is quite big. What would be your fav?

[ravihidayat]

@stritti I think I like PrimeVue more.

[stritti]

@ravihidayat then let us try to use PrimeVue together with vue 3.

[ravihidayat]

Let's. I'll start working on this and I'll keep you posted.

[ravihidayat]

@stritti Is there a way for us to discuss this since the discord link doesn't seem to work. I've managed to upgrade to Vue 3, and currently trying to debug. A bit challenging, so your input should be valuable.

[stritti]

@stritti Is there a way for us to discuss this since the discord link doesn't seem to work. I've managed to upgrade to Vue 3, and currently trying to debug. A bit challenging, so your input should be valuable.

Discord don't work? Hm, I have to check it. Currently I am on a trip. I will be back on 12nd October. Then we could have a look together.
What is your preferred timezone and time to talk?

Probably in time between @SponsoredByPuma or @KzuDemEvin could support?

[stritti]

@ravihidayat I found now the issue with discord. Sorry for that. Please try https://discord.gg/7JmRyn5dc6

[stritti]

@ravihidayat let me know how I could support you.

[ravihidayat]

@stritti Yeah, some of the bugs are persistent, and I'm not really sure what to do. I've even consulted to the docs. Should I DM you or should we talk over the development channel.

[stritti]

@ravihidayat I think easiest way could be to talk on dev channel. On next Monday, 17th I reserved the complete workday for Hacktoberfest and could be available between 10.00 am and 6.00 pm (GMT+2)

[stritti]

@ravihidayat Probably you could open a draft PR to have a discussion basis?

[stritti]

Hey @ravihidayat have you noticed last update of bootstrapVue: https://bootstrap-vue.org/vue3 ?

[haniAljti]

@stritti is anyone else working on this issue? because i could take if not.

[KzuDemEvin]

Hi @haniAljti, as far as I know no one else is working on this. The problem was that not all dependencies supported vue 3, so we decided to wait until all dependencies were updated. There were also compatibility issues with vue-bootstrap, but those may be fixed.
Feel free to work on it :)

[haniAljti]

Hi. Thanks for your answer. Ill try my best, please assign it to me

[haniAljti]

Hello,
Hope you're having a good day.

This is a list of the things that i did in my PR

• upgraded vue 2 to vue 3 using vue 3 compat
• updated and added a wrapper for Ui-toast-editor since the wrapper does not support vue 3 but it should function the same way.
• there is no update for "vue2-interact" that works on vue 3 but i've built the same functionality using Hammerjs. (I tested it. but it would be better if anyone tested it more)
• the project uses pinia instead of vuex now. Which should also solve Fontend: migrate from vuex to Pinia #212
• updated other dependancies to use vue 3

Since there are alot of changes, please take your time reviewing.

[stritti]

Awesome great work. Was quite a big issue and now finally done. thanks all for your work!