search

bcgov / entity

ServiceBC Registry Team working on Legal Entities
Apache License 2.0
23 stars 58 forks source link

Upgrade from Vue2 to Vue3 #13576

Closed severinbeauvais closed 2 months ago

severinbeauvais commented 2 years ago

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:

Full regression testing will be required of each project.

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

Additional Information

Migration Tips

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

Topics to investigate:

Vue3 (framework)

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

Vuex (global store)

Vue Router (paging/routes)

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

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

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)

Other considerations

severinbeauvais commented 2 years ago

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

cameron-eyds commented 2 years ago

@severinbeauvais Thanks! Edited to include PPR UI 👍

thorwolpert commented 2 years ago

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

severinbeauvais commented 2 years ago

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

jonathan-longe commented 1 year ago

@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 commented 6 months ago

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

severinbeauvais commented 6 months ago

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 commented 2 months ago

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

arlentees commented 2 months ago

@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 commented 2 months ago

OK, thanks for the explanation. Everything looks fine 😃