Design Systems Team/Current Status

Basic Vue.js support in MediaWiki
✅

Vue.js is now shipped as part of MediaWiki core. JS code in skins and extensions can  from ResourceLoader just like any other module. Single-file components ( files) are supported via ResourceLoader. See Using Vue in MediaWiki for more information.

Vue 2 -> Vue 3 Migration
T289017

The provided copy of Vue has been upgraded to the Vue 3 Migration Build. By default, the library will still behave in alignment with the Vue 2 API, but users can opt-in to the Vue 3 behavior by setting appropriate compatibility flags in their code.


 * Teams writing new Vue features should opt-in to Vue 3 behavior starting now.
 * Teams maintaining existing features (written for Vue 2 originally) should start planning their migrations.
 * Eventually the compatibility build will be removed (T289105), and all Vue code must be made Vue 3 compatible.

Development of Codex component library
The Codex library of Vue components (as well as design tokens, icons, and other design system assets) is under active development. Documentation for Codex can be found here.


 * Codex is currently in Alpha and breaking changes are still possible
 * Many components are still being developed; teams may need to supplement Codex components with custom components suitable for their needs
 * This is an open-source project and contribution is welcomed

To learn more about Codex, check out:


 * Phabricator workboard (see the Design Systems Team workboard for sorted and prioritized tasks)
 * Code (or GitHub mirror)
 * Live demo site

Support for ES6 across MediaWiki

 * Skins and Extensions can deliver ES6-compatible JS code by specifying  in their module definition (,  , etc).
 * Support for ES6 in gadgets is currently not available (TODO: phab task for this)

Support for server-rendering of Vue Components
❌