Upgrade from Vue2 to Vue3

[severinbeauvais]

Note that this description is a bit out of date -- some things are handled and there may be new things to resolved.

Description (Hypothesis):

As the ministry developing web features
I want to keep my software framework up to current releases
So that my software doesn't go stale and unsupported
And so that my software can take advantage of better code
And so that all my software projects can have common tools, common patterns, share components, etc.

Specifically: Most of the BCROS software projects use Vue version 2, which has entered maintenance mode and will reach end of life by the end of 2023. We should upgrade these projects to use Vue version 3, which is the current, latest major version of Vue.

Ref: https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3

Acceptance Criteria

Most BCROS projects use Vue 2 and should be upgraded, including:

• Auth Web (auth web includes fas-ui on the staff dashboard page, dependency there)
• Business Create UI
• Business Edit UI
• Business Filings UI
• Name Examination - Omid's Team
• Namerequest - Omid's Team
• SBC Common Components library
  • esp login stuff
  • see Upgrade sbc-common-components to Vue3  #16151 (Vue 3 branch exists)
• BCRS Shared Components library
• PPR UI (includes MHR)
• FAS UI
• Director Search - is already Vue3!
  • needs latest Vuetify
  • needs latest Vue3
• Search UI - is already Vue3!
• Beneficial Ownership?

Full regression testing will be required of each project.

Components that need to be (re)written (in Vue3)

• date picker (ask Kial)
• v-data-table (ask Kial)
• fee summary (ask Kial)
• staff payment? (ask Cameron)

Additional Information

• Start date: TBD (does not appear to be on PI 14 Roadmap)
• End date epic will be delivered: TBD but by end of 2023
• T-shirt size: unknown - depends on work to be done and resources available
• Process Flow: TBD
• CM considerations: Unknown
• Possible dependencies or blockers foreseen right now:
  • need to determine process flow (ie, what needs to be done to upgrade a project)
  • need to determine estimated effort per project
  • need to determine if some projects need to be upgraded before others
  • need to ensure that we're not missing anything
• Any recommendation to NOT upgrade any particular project and just leave it with old code?

Migration Tips

https://blog.teamdev.com/vue-2-to-vue-3-migration-tips-58da12e81d33

Topics to investigate:

Vue3 (framework)

• https://madewithvuejs.com/blog/vue-3-roundup
• https://v3-migration.vuejs.org/?ref=madewithvuejs.com
• https://v3-migration.vuejs.org/breaking-changes/global-api.html#provide-inject

Vue CLI

Consider changing the framework over to Vite + Vitest. done for most UIs
See #13658.

Typescript (language)

See #13656.

Vuetify 3 (UI components library)

THIS WILL BE A LARGE EFFORT FOR EVERY UI

• https://vuetifyjs.com/en/getting-started/installation/
• https://vuetifyjs.com/en/getting-started/upgrade-guide/
• some components are not supported yet (see elsewhere in this epic)
• Typescript changes/breakages
• some CSS is different - this is a great opportunity to have a Design System (everyone uses common CSS)
• some HTML is different

Vuex (global store)

• use Pinia instead
• see also Support for vue 3.0 ktsn/vuex-class#67 (comment)

Vue Router (paging/routes)

• need Vue Router 4
• https://router.vuejs.org/

Composition API vs Options API (app/component structure/design)

• https://github.com/vuejs/composition-api
• https://vuejs.org/guide/introduction.html#api-styles
• https://vuejs.org/guide/extras/composition-api-faq.html

Vue Class Component / Vue Property Decorator (component syntax + decorators)

• need vue-class-component v8 (https://www.npmjs.com/package/vue-class-component/v/8.0.0-rc.1)
• need vue-property-decorator v10 (https://www.npmjs.com/package/vue-property-decorator/v/10.0.0-rc.3)
• https://github.com/calebeaires/vue-decorator (Vue 3 wrapper for 2 packages)
• https://class-component.vuejs.org/
• [Vue v3] Changes for @Component decorator and Vue base class vuejs/vue-class-component#406
• https://medium.com/@takeit_/vue-3-composition-api-with-typescript-class-components-dbe7cc9bb468
• Vue 3.0 support kaorun343/vue-property-decorator#294 <<< lots of examples here
• possible alternative?
  • https://facing-dev.github.io/vue-facing-decorator/#/
  • https://github.com/facing-dev/vue-facing-decorator
• https://dev.to/metal3d/vue-ts-without-class-component-no-way-ic3

Storybook for Vue 3 (UI components demo/test app)

See #16550.

Vuelidate (special validation)

See #13654.

Vue2Filters (inline special formatting)

See #13653.

Vue Test Utils (unit test tools)

• need VTU 2
• https://www.npmjs.com/package/@vue/test-utils
• https://test-utils.vuejs.org/migration/

Other considerations

• Plugins "use" / global instance / breaking changes (?)
• sbc-common-components (sbc-common-components: convert to composition-api #14881)
• bcrs-shared-components (bcrs-shared-components: upgrade to Vue3 / Vuetify3 #16093)
• vue-affix (Vue3 upgrade: vue-affix #13651)
• vue-the-mask (Vue3 upgrade: vue-the-mask #13652)
• vue-template-compiler follows Vue version
• vuetify-loader
• vuex-class / vuex-module-decorators (Vue3 upgrade: vuex-module-decorators #13655)
• vue-debounce-decorator (Vue3 upgrade: vue-debounce-decorator #13853)
• etc

[severinbeauvais]

FYI: @pwei1018 @cameron-freshworks @kialj876 @thorwolpert @davemck513

[cameron-eyds]

@severinbeauvais
Thanks!
Edited to include PPR UI 👍

[thorwolpert]

https://v3-migration.vuejs.org/breaking-changes/ is a good thing to check ... esp when adding anything new

[severinbeauvais]

https://blog.logrocket.com/refactoring-vue-2-apps-vue-3/

[jonathan-longe]

@severinbeauvais we should revisit this issue and make sure it's on @davemck513 's radar.

Vue 2 will reach End of Life (EOL) on December 31st, 2023. After that date, Vue 2 will continue to be available in all existing distribution channels (CDNs and package managers), but will no longer receive updates, including security and browser compatibility fixes.

[ozamani9gh]

Name Examination UI Vue3 has been released to PROD !!!!! WOOOOOOHOOOOO

[severinbeauvais]

Name Examination UI Vue3 has been released to PROD !!!!! WOOOOOOHOOOOO

Congrats! If you want to pass along any lessons-learned, or processes/tools that worked well for you, please consider adding a ticket to this epic to share with others :)

[severinbeauvais]

@arlentees Name Examination may be upgraded but several other UIs are not (yet). I think this ticket should stay open.

[arlentees]

@severinbeauvais sorry about the confusion! With the Zenhub epic switch, this epic was converted to a single story and I've been cleaning up the duplicates - the new Epic is still open and can be accessed via https://app.zenhub.com/workspaces/entities-team-space---new-65550db1fcfd2f002838a52a/epics/Z2lkOi8vcmFwdG9yL1plbmh1YkVwaWMvMjA3ODI1?state=OPEN&state=TODO&state=IN_PROGRESS

[severinbeauvais]

OK, thanks for the explanation. Everything looks fine 😃