Vue.js

Vue.js is the Wikimedia Foundation's official choice for adoption as the JavaScript framework for use within MediaWiki. This page documents guidelines, best practices, and resources for using Vue within MediaWiki. This is not a general guide for using or developing with Vue.js; for that, see the general Vue.js documentation.

Background and History
Vue.js is a modern JavaScript framework used to build interactive user interfaces with ease and consistency. Its component-based approach, performance, approachable paradigms and documentation, and ecosystem of associated libraries make it a powerful tool for building simple or complex UIs. Since Vue is widely used, using it in MediaWiki means many more developers will be able to contribute. Vue is an open-source project supported by a core team and a community of volunteer contributors.

Discussions about adopting a modern JavaScript framework into MediaWiki began in early 2019. In December 2019, an RFC on the subject was started. Vue.js was added to core MediaWiki in February 2020. The NearbyPages extension, the first MediaWiki extension to use Vue.js, was released soon afterwards. The RFC ended in March 2020, with the official decision to use Vue.js (though this decision was not clearly announced until August 2021). WVUI (Wikimedia Vue User Interface), the first attempt at a shared library for Vue.js-based components for use within Wikimedia projects, was created in May 2020. The first MediaWiki version to include Vue.js, and the related Vuex library, was 1.35, released in September 2020. A replacement library for Vue.js within Wikimedia, Codex, was started in September 2021 following feedback from WMDE, and WVUI became deprecated. Vue.js within MediaWiki was upgraded from version 2 to 3 in December 2021.

The i18n plugin
The  module comes with a small i18n plugin that wraps MediaWiki's i18n system, so you can use MediaWiki i18n messages in your templates. This plugin creates an  function that you can use inside templates, which is an alias for. For plain text messages (most cases), you can simply use: You can pass parameters either variadically, or as an array: The  function returns a Message object, so you can use it in all the same ways that you can use   in "normal" JS code. Remember that all message keys you use have to be added to the  array in the ResourceLoader module definition.

Parsed messages
Because parsed messages return HTML rather than text, they have to be invoked differently: Note that  doesn't work, because the   syntax only works for text, not HTML. If you try to use a parsed message this way, the user will see the resulting HTML as plain text.

See the documentation comments in  for a more detailed explanation of.

Complex use cases
If the parameters to a message are complex, or if both the message name and its parameters are dynamic, it may be better to create a computed property for the message, as follows:

Testing
You should write tests! The current recommendation is to use Jest.

See the Vue.js testing guide for more information about how to test Vue components in a MediaWiki environment.

Error reporting
Client side errors can be monitored in Logstash. Dedicated documentation forthcoming in T248884.

TypeScript
(coming soon)

IE 11
As MediaWiki is using Vue 3, any features built with it will not work with IE11. See Compatibility/IE11 for more information.

Most important

 * Official guide
 * Official API documentation
 * Official style guide
 * Official devtools browser extensions

Additional

 * Mozilla Developer Network (MDN) Vue.js documentation

Training vendors

 * Vue School
 * Frontend Masters
 * Vue Mastery (includes some free courses too)

From around MediaWiki

 * Successful Technical RFC on evaluating front-end frameworks within the MediaWiki ecosystem
 * 2020: The Year in Vue from the Wikimedia Tech Blog

GitLab

 * Vue.js frontend development guidelines
 * Why we chose Vue.js
 * How we do Vue: one year later