Vue.js

Vue.js is the Wikimedia Foundation's official choice for adoption as the future JavaScript framework for use within MediaWiki. The usage of Vue.js within MediaWiki remains experimental, and it is not ready for widespread use. 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.

History
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: Note the comment overriding the ESLint rule. This is needed because using  is discouraged except when necessary. For more information, see the coding conventions.

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.

Skin

 * New Searchbar for Desktop Improvements (part of WVUI)
 * Synthetic performance tests were also setup as part of this project that compare the lazy load time, query to render time, etc between legacy search and the Vue search implementation. The dashboard can be seen at https://grafana-rw.wikimedia.org/d/GivPpdsGk/vue-vs-legacy-search?orgId=1

Extension

 * Extension:MediaSearch
 * Uses Vuex
 * Has a fallback PHP implementation of the basic UI for a no-JS experience
 * Jest unit tests
 * Content Translation's new dashboard and section translation
 * This approach uses webpack based build and offers hot reloading and close integration with Vue dev tools
 * Extension:MachineVision
 * Uses Vuex
 * Extension:GlobalWatchlist
 * Extension:NearbyPages
 * Extension:WikiLambda
 * MediaWiki Vue.js Sandbox (test extension)

WMDE/Wikibase

 * "microfrontends" "termbox" (currently on mobile only)
 * Wikidata Bridge (currently on selected Wikipedias only), see code
 * Tainted References

Miscellaneous

 * Codex UI toolkit (see live demo)
 * WMDE
 * Simple Query Builder (An easier way than SPARQL of querying Wikidata), see code
 * Wikit (Design System and Component Library), see code
 * Wikibase Vue.js components repo
 * The Toolhub catalogue

Most important

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

Additional

 * Vue.js News (weekly newsletter)
 * 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