Once MediaWiki core's version of Vue has been upgraded to the Vue 3.2 migration build, 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 things.
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. 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://v3.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 ignored.
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 );
}
} );
// 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' ),
customPlugin = require( './plugins/customThingy.js' );
Vue.createMwApp( $.extend( { store: store }, App ) )
.use( customPlugin )
.mount( '#foo' );
```
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)