Request Status: Existing Request
Request Type: Project Support + deprecate
==**Request Title: Upgrade MediaWiki projects from Vue 2 to Vue 3**==
Request Description: As a result of decisions made at the Vue.js Developer Summit, the Design Systems Team will lead a migration to Vue 3 for all existing and new Vue-based code. This means Vue-based features will no longer be able to support IE11 and other non-ES5 browsers.
Indicate Priority Level: Medium/Low
Main Requestors: Design Systems Team
Ideal Delivery Date: FY22-23
Stakeholders: All frontend teams using Vue.js (Wikidata, Readers Web, Structured Data, Language, Abstract Wikipedia)== Upgrade MediaWiki projects to Vue 3 and remove compatibility build
===== Acceptance Criteria =====
The Vue 3 migration is complete. All code that uses Vue has been migrated to the full version of Vue 3, and the compatibility build has been removed.
===== Milestones =====
We are taking an iterative approach to this project to mitigate the risks of breaking changes that a major upgrade can cause. For each milestone, we will work with affected teams to assist with changes and coordinate testing and deployment. Current Status (5/31/23)
* MediaWiki currently ships Vue 3 with the Compatibility build included.
1. [[ https://v3.vuejs.org/guide/migration/migration-build.html#overview | Vue 3 compatibility build ]] (aka "the migration build"), which is a build of Vue 3 that provides configurable Vue 2 compatible behavior. At this stage, existing Vue 2 behaviors will continue to work, with deprecation warnings. The compatibility build is designed to support everything the full build supports, so teams can also begin [[ https://v3.vuejs.org/guide/migration/migration-build.html#per-component-config | testing their components ]] against the full version of Vue 3.
2. [[ https://v3.vuejs.org/guide/migration/introduction.html#overview | Vue 3 full build ]]. After the compatibility build is deployed to production, we will replace any remaining Vue 2 code and eliminate runtime errors. We must also upgrade Vuex,* New Vue-based features and Codex components are all being developed against the full Vue 3 API. the state management app for VueHowever, to [[ https://next.vuex.vuejs.org/ | Vuex 4 ]].
===== Steps: Vue 3 Compatibility Build =====
[x] Prepare a patch to upgrade the Vue version in MediaWiki to the migration build of Vue 3.2 (more detail at T251974)here are still some legacy Vue apps embedded in skins or extensions which rely on Vue 2 behavior.
==== Acceptance Criteria
[x] Verify* All code that this patch doesn't break anyuses Vue has been migrated to the full version of the existing extensions using Vue (T289019)Vue 3, and the compatibility build has been removed.
[x] Wait for the security readiness review for Vue 3 (T257734) to be completed* This work must be completed before Vue 2 reaches EOL at the end of 2023.
==== Next Steps:
[x] Merge the compatibility build upgrade patch* Now that we are using Vue 3 with the Compatibility Build across MediaWiki, we should go into each codebase which is using Vue.js and follow the steps documented in the [[ https://v3-migration.vuejs.org/migration-build.html#upgrade-workflow | Vue 3 Migration Guide ]]. To test Vue 3 compatibility, set `compatConfig: { MODE: 3 }` as an option in each component file – this disables all compatibility mode features and forces full Vue 3 behavior on a per-component basis. See {T289020} for a list of all Vue-based features; subtasks should be filed against that task for each codebase, and patches should be written against the respective codebase-specific tasks to add `compatConfig` flags to Vue components. These patches can be tested, deployed, and (if necessary) reverted normally.
===== Steps: Vue 3 Full Build =====
[ ] Begin migrating all code using Vue, addressing migration warnings then disabling compat mode for migrated components (T289020)
[x] Ensure all code using Vuex is ready to be migrated (T289089)
[x] Wait for the security readiness review for Vuex 4 (T288768) to be completed
[x] Upgrade the Vuex version in MediaWiki to 4.0.2 (T289102)
[x] Migrate code using Vuex to the new calling style (T289103)
[ ] Once everything is migrated, remove compatibility code and switch from the migration build of Vue to the regular build (T289104)
[ ] Clean up other compatibility/migration remnants, like the `{ compatConfig: { MODE: 3 } }` settings disabling compat mode for migrated components (T289105)
===== Deploy Checklist =====
[ ] Coordinate QA timelines and QA sign-off across teams (product/program)
[ ] Target deploy train and post ETA in comments
[ ] Prod verify and address fast-follows