Entities - Upgrade from Vue2 to Vue3
- Dominant language
- JavaScript
- Stars
- 23
- Forks
- 62
- Avg merge
- 24m
- Merged PRs (30d)
- 1
Description
> _This issue was auto-created as part of the Zenhub sub-issues migration. The original entity was opened on 2022-09-12. For more details see [this post](https://changelog.zenhub.com/migration-of-epics-projects-to-sub-issues-313645?zenhub_entity_id=Z2lkOi8vcmFwdG9yL1plbmh1YkVwaWMvMjA3ODI1)._
**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](https://github.com/bcgov/sbc-auth/tree/main/auth-web) (auth web includes fas-ui on the staff dashboard page, dependency there)
- [ ] [Business Create UI](https://github.com/bcgov/business-create-ui)
- [ ] [Business Edit UI](https://github.com/bcgov/business-edit-ui)
- [ ] [Business Filings UI](https://github.com/bcgov/business-filings-ui)
- [x] [Name Examination](https://github.com/bcgov/name-examination) - Omid's Team
- [ ] [Namerequest](https://github.com/bcgov/namerequest) - Omid's Team
- [x] [SBC Common Components library](https://github.com/bcgov/sbc-common-components)
- esp login stuff
- see #16151 (Vue 3 branch exists)
- [ ] [BCRS Shared Components library](https://github.com/bcgov/bcrs-shared-components)
- [ ] [PPR UI](https://github.com/bcgov/ppr) (includes MHR)
- [ ] [FAS UI](https://github.com/bcgov/fas-ui)
- [x] Director Search - _is already Vue3!_
- needs latest Vuetify
- needs latest Vue3
- [x] [Search UI](https://github.com/bcgov/registries-search/tree/main/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](https://miro.com/app/board/o9J_kp_AGwc=/))_
* 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 https://github.com/ktsn/vuex-class/issues/67#issuecomment-1658593017
### 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/
- https://github.com/vuejs/vue-class-component/issues/406
- https://medium.com/@takeit_/vue-3-composition-api-with-typescript-class-components-dbe7cc9bb468
- https://github.com/kaorun343/vue-property-decorator/issues/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 (#14881)
- bcrs-shared-components (#16093)
- vue-affix (#13651)
- vue-the-mask (#13652)
- ~vue-template-compiler~ _follows Vue version_
- vuetify-loader
- vuex-class / vuex-module-decorators (#13655)
- vue-debounce-decorator (#13853)
- etc
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.