View source for Vue.js

[https://vuejs.org Vue.js] is a JavaScript framework that is [[mediawikiwiki:Vue.js|used in the MediaWiki project]] (and just about everywhere else) for creating the frontend. For MediaWiki, Vue.js in used in the new [[mediawikiwiki:Codex|'''Codex''']] design system for Wikimedia. Codex replaces MediaWiki UI (and [[MediaWiki/Theming#OOUI - The Object Oriented User Interface|OOUI]]) which relied heavily on jQuery. While jQuery was great - and is still shipped<ref>https://www.mediawiki.org/wiki/ResourceLoader/Core_modules</ref> with MediaWiki core, the JavaScript and browser landscape has changed significantly leading to whole new JavaScript libraries and frameworks such as Vue.js.

https://gitlab.wikimedia.org/repos/design-systems/CodexExample is a repo that shows how to leverage Codex in your MediaWiki extensions.

<br />

== Guide ==

=== Single-File Components ===
Vue Single-File Components (a.k.a. <code>*.vue</code> files, abbreviated as '''SFC''') is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file. In other words, it's the traditional HTML, JavaScript and CSS all together as a unit. The [https://vuejs.org/guide/scaling-up/sfc.html#introduction intro] explains how this doesn't break the programming paradigm of '[https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns separation of concerns]' but rather it addresses the need for co-locating code that is inherently coupled (and you can still separate stuff out if you prefer, using <code>src</code> imports).


{{References}}

[[Category:UI]]
[[Category:JavaScript]]
[[Category:MediaWiki]]