Difference between revisions of "Vue.js"
(link to mw.o) |
(Add guide section) |
||
| Line 3: | Line 3: | ||
https://gitlab.wikimedia.org/repos/design-systems/CodexExample is a repo that shows how to leverage Codex in your MediaWiki extensions. | https://gitlab.wikimedia.org/repos/design-systems/CodexExample is a repo that shows how to leverage Codex in your MediaWiki extensions. | ||
| − | {{References}} | + | <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). | ||
| + | <br />{{References}} | ||
[[Category:UI]] | [[Category:UI]] | ||
[[Category:JavaScript]] | [[Category:JavaScript]] | ||
[[Category:MediaWiki]] | [[Category:MediaWiki]] | ||
Revision as of 11:49, 22 December 2023
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 Codex design system for Wikimedia. Codex replaces MediaWiki UI (and OOUI) which relied heavily on jQuery. While jQuery was great - and is still shipped[1] 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.
Guide[edit | edit source]
Single-File Components[edit | edit source]
Vue Single-File Components (a.k.a. *.vue 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 intro explains how this doesn't break the programming paradigm of '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 src imports).
== References ==
