Manual:Coding conventions/Vue

This page describes coding conventions for Vue in the MediaWiki codebase. See also the JavaScript and CSS/LESS conventions which apply to such code within Vue files.

Linting
We use ESLint as our code quality tool, with the Vue profile within the custom config for Wikimedia.

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).

General Structure
Single-file components are broken into three sections:,  , and  ; components should follow this order, with the   block being optional. Each component file should be listed individually under the  property in the appropriate module definition in. Make sure that the module definition also includes the  module as a dependency.

Template

 * tags should contain a single root element
 * 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. This recommendation will likely change to conform to Vue's community style guilde once ResourceLoader has been updated to remove this limitation.
 * Use the directive short-hands ( instead of ,   instead of  ).
 * 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  section instead.
 * Component templates should only include simple expressions; for anything more complex, define a computed property or method in the  section instead.

ES6/ResourceLoader
Coming soon!