Jump to content

Vue.js

Issue tracker: #Vue.js
From mediawiki.org
MediaWiki version:
≥ 1.35

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

[edit]

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.

Milestones

[edit]
  • Early 2019 - Discussions about adopting a modern JavaScript framework into MediaWiki began.
  • December 2019 - An RFC on the subject was started.
  • February 2020 - Vue.js was added to core MediaWiki. The NearbyPages extension, the first MediaWiki extension to use Vue.js, was released soon afterwards.
  • March 2020 - The RFC ended, with the official decision to use Vue.js (though this decision was not clearly announced until August 2021).
  • May 2020 - WVUI (Wikimedia Vue User Interface), the first attempt at a shared library for Vue.js-based components for use within Wikimedia projects, was created.
  • September 2020 - MediaWiki 1.35 was released; it was the first version to include Vue.js, as well as the related Vuex library.
  • September 2021 - A replacement library of WVUI for Vue.js within Wikimedia, Codex, was started following feedback from WMDE.
  • December 2021 - Vue.js within MediaWiki was upgraded from version 2 to 3.
  • February 2022 - Codex was added to MediaWiki 1.38.
  • April 2023 - WVUI was removed in MediaWiki 1.40.
  • April 2023 - Pinia, the successor library to Vuex, was added to MediaWiki core.
  • October 2023 - Codex 1.0, considered the first fully usable version of Codex, was released.
  • November 2023 - Vue.js within MediaWiki was switched from "compatibility mode" to proper Vue 3.
  • August 2025 - OOUI was placed in maintenance mode, with no additional features to be added.

Guidelines

[edit]
The following guidelines apply to usage of Vue.js inside of MediaWiki
Tracked in Phabricator
Task T313945
Open
Tracked in Phabricator
Task T340460
Resolved

Get Vue.js from ResourceLoader

[edit]

Developers should rely on the version of Vue that is already provided via ResourceLoader rather than bundling or vendoring their own copy of the library. MediaWiki ships with Vue 3. The exact version can be found in foreign-resources.yaml.

Developers of skins or extensions which list "vue" as a dependency in extension.json or skin.json can require the library as they would any other RL module. 

const Vue = require( 'vue' );

Developers of gadgets, or of any feature where Vue is to be loaded conditionally, can load the Vue module on the client-side: 

mw.loader.using( [ 'vue' ] ).then( function ( require ) {
    const Vue = require( 'vue' );
} );

Use single-file components

[edit]

MediaWiki supports Vue single-file components (aka .vue files) within any ResourceLoader module that is using the packageFiles feature. However, MediaWiki's support for single-file components (SFCs) is incomplete, and has the following limitations:

Files/tags:

  • .vue files are only supported in package modules (modules that use packageFiles)
  • Self-closing tags for components (e.g. ) are not supported. Instead, you have to use open and close tags (e.g. ).
  • Component tags using PascalCase (e.g. ) are not supported. Instead, you have to use kebab-case for component names (e.g. ).

Scripts: