search

bcgov / orgbook-bc-client

Vue.js rewrite of OrgBook BC
Apache License 2.0
6 stars 8 forks source link

Upgrade/Migrate to Vue 3 #192

Open WadeBarnes opened 11 months ago

WadeBarnes commented 11 months ago

Vue 2 reaches EOL on December 31st, 2023

Details here

amanji commented 3 months ago

I worked on this for a bit and there a large number of breaking changes that need to be accounted for:

  1. Vue 3 does not actively support or recommend class components anymore. They recommend the more favourable functional components through the Composition API. This would require a change to every single component in OrgBook since we are dependent on class components (at the time these were a much cleaner way to define Vue 2 components)
  2. We are currently using the deprecated vue-property-decorator. I have not been able to get components to render correctly in Vue 3 with this. There is a community based project vue-facing-decorator, which is similar, but also requires changes to every component, since these newer decorators don't support Vuex very well. We would have to pull Vuex logic into the component body, which would require extensive testing to make sure things don't break.
  3. Vuetify would need to be updated and this could cause wide-spread effects.

Given the effort required for this, I would have to also ask what the long term support plans are for OrgBook? If we aim to support this long term then we may want to push through make the switch to Vue 3.

We must patch vulnerable packages and that was part of this current effort. I have moved to using Vite over Vue-CLI, which has not only considerably sped up build times, but has also resolved many of the package audit warnings. Doing so did not require any changes to application code, except for 4 Vuetify SASS styling overrides (which are related to the timeline and can be inlined directly into the component). I can draft a PR with the update to Vite for now if that works.

Tagging: @swcurran, @esune and @WadeBarnes for further input.

amanji commented 3 months ago

There appear to be a lot of discrepancies between Vuetify 2 and 3 which is resulting in time required to adjust CSS application-wide. This will require more effort to fully upgrade.