Upgrade MediaWiki projects to Vue 3 and remove compatibility build
Current Status (5/31/23)
- MediaWiki currently ships Vue 3 with the Compatibility build included.
- New Vue-based features and Codex components are all being developed against the full Vue 3 API. However, there are still some legacy Vue apps embedded in skins or extensions which rely on Vue 2 behavior.
Acceptance Criteria
- All code that uses Vue has been migrated to the full version of Vue 3, and the compatibility build has been removed.
- This work must be completed before Vue 2 reaches EOL at the end of 2023.
Next Steps:
- 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 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: Migrate all extension/skin code to Vue 3 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)
- Ensure all code using Vuex is ready to be migrated (T289089)
- Wait for the security readiness review for Vuex 4 (T288768) to be completed
- Upgrade the Vuex version in MediaWiki to 4.0.2 (T289102)
- 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