Vue 3 Unsupported Components

[mstanton1]

Thor noted Vue 2 is 9 months from end of life. Review is required to determine where we use Vue 2 and the scope of work needed to upgrade to Vue 3. The first phase of this will be to prepare unsupported components for update.

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

Full regression testing will be required of each project.

Additional Information

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

Typescript (language)

• https://vuejs.org/guide/typescript/overview.html

Vuetify (UI components library)

• need Vuetify 3
• not yet released (beta is available)
• https://vuetifyjs.com/en/introduction/roadmap/#in-development

Vuex (global store)

• need Vuex 4
• https://v3.vuex.vuejs.org/

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

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

• https://storybook.js.org/blog/storybook-vue3/
• https://www.npmjs.com/package/@storybook/vue3
• https://github.com/bcgov/bcrs-shared-components/blob/main/.storybook/preview.js

Vuelidate (special validation)

• https://vuelidate-next.netlify.app/#alternative-syntax-composition-api

Vue2Filters (inline special formatting)

• https://www.google.com/search?q=Vue2Filters+vue3

Vue Test Utils (unit test tools)

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

Vue CLI

• need vue-cli 5?
• https://cli.vuejs.org/migrations/migrate-from-v4.html
• or use Vite instead? (https://vitejs.dev/)
  • alternative to WebPack
• Vue CLI plugins (babel, e2e-nightwatch, eslint, router, typescript, unit-jest, vuex)
  • https://cli.vuejs.org/core-plugins/

Other considerations

• Plugins "use" / global instance / breaking changes (?)
• sbc-common-components
• bcrs-shared-components
• vue-affix
• vue-the-mask
• vue-template-compiler
• vuetify-loader
• vuex-class
• vuex-module-decorators