Basic Vue.js support in MediaWiki

 Done

Vue.js is now shipped as part of MediaWiki core. JS code in skins and extensions can require( 'vue' ) from ResourceLoader just like any other module. Single-file components (.vue files) are supported via ResourceLoader. See here for guidelines about using Vue.js within MediaWiki.

Development of library of Codex components

In progress

Codex contains a library of components that is under active development. Components are built with Vue.js, and some components also have a CSS-only version that does not require JavaScript. Documentation for Codex can be found here.

• Some components are still being developed; developers may need to supplement Codex components with custom components suitable for their needs. Check out the list of components that we plan to add to Codex.
• This is an open-source project and contributions are welcome! Learn how to contribute a new or updated component.

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

Modern user interfaces for all users

In progress

Codex components are currently only available when modern JavaScript is available and once JavaScript has loaded, which would exclude users of older browsers. We would like to find a way to make user interfaces built with Codex work for these users as well.

• See timeline for current status

Design and define design tokens

 Done

Design tokens are the smallest pieces of our design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Design tokens are now available for use in MediaWiki.

Support for ES6 across MediaWiki

In progress

MediaWiki is using Vue 3, which dropped support for IE11. Features using Vue.js should ensure they are only delivered to modern browsers by setting "es6": true in their module definitions.

• Developers of skins and extensions are encouraged to start using ES6 features in their Vue.js code now; Wikimedia's eslint-config rules include a preset for vue3-es6 that will be useful here.
• This is in alignment with current guidelines about how to support legacy browsers like IE11 – in general new JS features should not target these browsers; if they must be supported, a server-rendered fallback should be defined.
• Support for ES6 in gadgets is currently limited due to lack of support in the JS syntax checker. See T75714 for more information.

Vue 2 to Vue 3 Migration

T289017

In progress

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.