Upgrade/Migrate to Vue 3

[WadeBarnes]

Vue 2 reaches EOL on December 31st, 2023

Details here

[amanji]

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]

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.

[Gavinok]

Here are the current plans for changes

Migration While still using Vue 2

• Migrate to vite
• Migrate to Pinia from Vuex
• Remove as many blockers while still using vue2

  • A. can be premigrated in vue2

    • cross-compatible
    • can be drop in replaced
    • e.g.
      • vue-property-decorator

  • B. have a separate vue 3 version

    • clear upgrade path
    • declares compatConfig
    • e.g.
      • vuex (Dropped for pinia)
      • vue-router
• Use ESLint plugin vue to catch depreciated things in vue 2 that will make migration difficult
• Begin migrating components from class based to functional

Upgrade to Vue and Vuetify 3

• Install vue/compat which should support a lot of the

• And upgrade to vuetify 3 (likely to take a while)

• And begin migrating components to the new vuetify version

• Currently 51 components will need to be migrated