This dummy extension template is intended to demonstrate how Vue.js can be used within a MediaWiki envirionment. It is based on the Boilerplate extension.
Download this extension into the extensions directory of your local
MediaWiki instance. Then enable it in LocalSettings.php by adding:
wfLoadExtension( 'VueTest' );All Vue.js code is meant to be handled by ResourceLoader at runtime, so
running npm install is not necessary. However, there are a number of
devDependencies specified in package.json that may be useful for
development and testing.
Once set up, running npm test and composer test will run automated code checks.
This extension adds a new special page, Special:VueTest. This page contains
several interactive demos to showcase some of what you can do with Vue, as well as
how this tool can be integrated in a MediaWiki envirionment.
- Single-file Vue components using ES5 (plus require/module.exports)
- Vue 3 (using the compatibility build)
- ES6 in component files (except for
importandexport) - Use of the new Codex component library
- Linting JS, CSS/LESS, and HTML in .vue files
- Less compilation in component style blocks
- CSS Janus works (try uselang=ar to see it in action)
- Vue.js Devtools (use debug=true or set $wgVueDevelopmentMode = true in config
- mw.message and mw.api functionality is provided via the
createMwAppwrapper
- Using non-ES5 JS (in vue files or elsewhere)
- Scoped component styles
- Hot module reloading in development
- Non-LESS pre-processors
- Non-HTML templates (Jade, etc)