Vue.js: Difference between revisions

(2 intermediate revisions by the same user not shown)

Line 1:

[https://vuejs.org Vue.js] is a JavaScript framework that is 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://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).

[[Category:UI]]

[[Category:JavaScript]]

[[Category:MediaWiki]]

@@ Line 1: / Line 1: @@
-[https://vuejs.org Vue.js] is a JavaScript framework that is 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://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]]