Once MediaWiki core's version ofurrently provides Vue has been upgraded to the Vue 3.2 3 with the official "migration build,ld" enabled. we will need to migrate all code using Vue in our extensions and skins away from deprecated Vue 2 APIs/usage to the Vue 3 way of doing thingsThis means that a lot of code is still using Vue 2 behavior at runtime.
For each extension or skin:
- Update CSS class names for `<transition>`s, if any (see [[https://v3.vuejs.org/guide/migration/transition.html|this entry in the migration guide]] for details)
- Use the new mounting API instead of the old one (for details see below)
- Address migration warnings that appear in the console.In order to remove the migration build (per T289104), See [[https://v3.vuejs.org/guide/migration/migration-build.html#feature-reference|the feature reference]] for an explanation of what each migration warning means, and read through the [[https://v3we need to go into each skin or extension that is using Vue.js and follow the relevant steps of the [[ https://v3-migration.vuejs.org/guide/migration/introduction.html#breaking-changes|list of breaking changes]] to see if any of them apply to your code.
- **Migration warnings only appear for code that is executed**, so be sure to thoroughly test your code and also read the breaking changes list to find migration issues that might not have appeared right away.
- Once there are no more migration warnings in the console from your code (you may still see warnings from unmigrated code in other extensions/skins/libraries), add `compatConfig: { MODE: 3 }` to the component definition of each of your components (you can also do this on a component-by-component basis as you address warnings). This disables Vue 2 compatibility, and any remaining code that relies on Vue 2 compatibility will break.
- Test that everything still works, and submit a commit with your changes to Gerrit
See also https://www.mediawiki.org/wiki/Vue.js/Vue_3_migration , which also has information on which warnings can be ignoredorg/migration-build.html#upgrade-workflow | upgrade workflow ]].
Example of mounting code changes:
```lang=javascript
// Old API (without Vuex):
var App = require( './App.vue' );
new Vue( {
el: '#foo',
render: function ( h ) {
return h( App );
}
} );ach codebase using Vue should get its own subtask in order to track the progress of this work; patches should be written against the relevant subtask.
// New API (without Vuex):
var App = require( './App.vue' );
Vue.createMwApp( App ).mount( '#foo' );
// Old API (with Vuex and custom plugins):
var App = require( './App.vue' ),
store = require( './store/index.js' ),
customPlugin = require( './plugins/customThingy.js' );
Vue.use( customPlugin );
new Vue( {
el: '#foo',
store: store,
render: function( h ) {
return h( App );
}
} );
// New API (with Vuex and custom plugins, but before the Vuex 3->4 migration):
var App = require( './App.vue' ),
store = require( './store/index.js' ),One approach would be to do the following:
customPlugin = require( './plugins/customThingy.js' );* Go into a codebase and add `compatConfig: { MODE: 3 }` to each component's options
Vue.createMwApp( $.extend( { store: store }, App ) )* See if anything breaks in manual or automated testing
.use( customPlugin * Fix regressions (you can enable/disable compat for specific features if necessary, see the Vue migration docs for more info on this)
.mount( '#foo' );* Deploy the patch on PatchDemo or Beta for any additional testing
```* Revert the patch if necessary and fix any problems
Extension/skin checklist:
[ ] ContentTranslation
[ ] GlobalWatchlist
[ ] GrowthExperiments
[ ] MachineVision
[x ] MediaSearch
[ ] NearbyPages
[ ] QuickSurveys
[ ] ReadingLists
[x] Vector
[x] Wikibase (including wikibase-termbox, which is a submodule of Wikibase) T304534
[x] WikibaseLexeme T304534
[x] WikiLambda (T289020)