Manual:Coding conventions/Vue/nl

This page is a translated version of the page Manual:Coding conventions/Vue and the translation is 100% complete.

Deze pagina beschrijft de coderingsconventies voor Vue in de MediaWiki codebase. Zie ook de JavaScript en CSS/LESS conventies die van toepassing zijn op dergelijke code binnen Vue-bestanden.

Linting (Rollend)

We gebruiken ESLint als ons hulpmiddel voor codekwaliteit. De custom config voor Wikimedia (eslint-config-wikimedia) bevat zowel algemene als MediaWiki-specifieke regels voor Vue-code.

Het maken van ESLint om de definities van componenten te herkennen

U moet // @vue/component boven een componentendefinitie vermelden om als zodanig door ESLint te worden herkent (zie voorbeeld hieronder). Als ESLint ziet dat deze opmerking ontbreekt, waarschuwt het u en zegt het u toe te voegen, maar het zal uw code niet kunnen interpreteren als Vue-code totdat u dat doet.

var AnotherComponent = require( './AnotherComponent.vue' );

// @vue/component
module.exports = {
    name: 'MyComponent',
    components: { 'another-component': AnotherComponent },

Het opzetten van ESLint

Als u al de wikimedia/client of wikimedia/client-es6 vooraf instellingen van het eslint-config-wikimedia package in uw .eslintrc.json gebruikt, worden lint regels voor Vue automatisch toegepast op .vue bestanden. Vanaf versie 0.23.0 van eslint-config-wikimedia, de standaardregels van ES5 zijn Vue 2, en de standaardregels van ES6 zijn Vue 3. Nieuwe code moet worden geschreven met Vue 3 (en dus met gebruik van ES6); de ES5+Vue2 regels zijn alleen bedoeld voor legacy code.


Single-file Components

Vue's single-file components format (.vue) should be used wherever possible. This allows templates, logic, and (optionally) styles for a given component to live together in one file. ResourceLoader supports on-the-fly compilation of .vue files (see here for more info about using Vue with ResourceLoader). This allows developers to write .vue files without needing to rely on any new build tools (Rollup, Webpack, etc), while still benefiting from the various optimizations that ResourceLoader provides for front-end code (RTL styling via CSS Janus, JS minification, etc).

Where possible, Vue code should follow the Vue community's style guide. In particular, all recommendations in "Priority A: Essential" should be followed at all times. Any MediaWiki-specific exceptions will be called out below. If ESLint is set up correctly, it will enforce all rules from the Vue style guide (Priority A, B and C) as well as MediaWiki-specific rules and exceptions.

General Structure

Single-file components are broken into three sections: <template>, <script>, and <style>; components should follow this order, with the <style> block being optional. Each component file should be listed individually under the packageFiles property in the appropriate module definition in extension.json. Make sure that the module definition also includes the vue module as a dependency.


  • Component tags must not be self-closing: this is a departure from Vue's style guide recommendations based on current limitations in ResourceLoader. Regardless of whether a component uses slots, it should have a closing tag.
Correct: Wrong (self-closing components):
    <h1>Hello world</h1>



<basic-component />
Correct (kebab-case): Wrong (PascalCase):
<some-component :foo="bar"></some-component>
<SomeComponent :foo="bar"></SomeComponent>
  • Use the directive short-hands (:foo instead of v-bind:foo, @click instead of v-on:click).
  • Elements with multiple attributes should break them out onto separate lines
  • Component templates should only include simple expressions; for anything more complex, define a computed property or method in the <script> section instead.
  • Message strings in templates must be internationalized just like in standard JS or PHP UI development. See the documentation on internationalization in Vue for more information.
  • Use v-html sparingly and carefully, because it can lead to XSS vulnerabilities if used incorrectly. If you must use v-html, carefully audit the code that generates the HTML to ensure that all untrusted input is escaped.
    • For parsed i18n messages (mw.message( 'foo' ).parse()), using v-html is not necessary in most cases. Use v-i18n-html instead, if possible.
    • Because v-html is discouraged, using it causes an ESLint error. If you must use it, add <!-- eslint-disable-next-line vue/no-v-html --> on the line above the tag that uses v-html to dismiss the ESLint warning.
    • Before adding this override, double-check your code to ensure your usage of v-html is safe.


  • Single-file components delivered via ResourceLoader should follow the CommonJS module format and should use ResourceLoader's PackageFiles feature. This means that each component file should include a module.exports statement, and should import other code using require():
    var OtherComponent = require( './OtherComponent.js' );
    // @vue/component
    module.exports = {
        name: 'MyComponent',
        components: {
            'other-component': OtherComponent
        // … etc.
  • Component options should be specified in the order defined here: Generally this means: name, components, mixins, props, emits, setup, data, computed properties, methods, watchers, lifecycle hooks, and finally render functions (in the rare situations where those need to be defined manually).
  • Render functions should be avoided outside of special cases; HTML-style templates are preferred instead. The vue module provided in MediaWiki core is the full version, which includes the template compiler.
  • Use prop definitions and consider specifying defaults or validating data where necessary. Boolean props should default to false.
  • Avoid implicit parent-child communication and the mutation of received props within a child component. Prefer the "props down / events up" approach


  • MediaWiki CSS and LESS conventions apply, styles are linted with custom Wikimedia stylelint config
  • Since each component should contain a single top-level component, styles should be nested under a single selector (if using LESS)
  • Conditional CSS classes should be used for dynamic styles. Object syntax is preferred for computed properties that are bound to class attributes.
  • Vue transition names should follow the same pattern as CSS class names (e.g. including an extension-specific prefix)

Progressive Enhancement

TBD: define a no-JS fallback for most features you build this way.