Like T330350, but as a user script. See also T307487, which did some exploration in this area.
Current issues
Using Vue and Codex in userscripts is going to be all but blocked by T75714: Update JavaScript syntax checker for gadgets and user-scripts for ES6 and later.
Gadgets and Userscripts rely on an outdated JS syntax validator which is written in PHP. This library doesn't support modern (ES6 and beyond) JS syntax, meaning that userscripts which include ES6 features will automatically fail.
Some work was done to allow individual Gadgets to opt-out of this validation, but for userscripts this is not possible (because there is no way to define metadata for a userscript, it's just a wiki page with a JS extension in the user namespace).
The "best" experience for writing Vue/Codex code involves using Vue's single-file component feature (.vue files). This allows template, script, and styling for a single component to all be defined in the same file. Developers who are working in MW Extensions can use .vue files (ResourceLoader supports them), and hopefully we'll enable this for Gadgets as well.
There are alternatives to using single-file components that involve using ES6 template strings (which can be multi-line, suitable for writing template markup). Another alternative would be to add a <script> tag to the page with type="x-template", where the body of the script tag contains the template markup for Vue to use. This markup won't be visible until Vue is loaded.
Unfortunately, I don't think MW allows users to arbitrarily add <script> tags to pages, and if ES6 template literals are also disallowed, then we are left with no good way to define component templates. Users would have to write everything inside a single-line string literal (good luck using any complex markup), or would need to resort to manual render() functions (an advanced technique not suitable for beginners).
So until there is a way to get around enforcement of (now quite outdated) ES5 validation, using Vue and Codex in the context of userscripts is not something I would recommend – you are better off just using OOUI and jQuery.
Potential solutions
- Figure out a way to disable the existing validator for userscripts (some? all? which ones? Unlike Gadgets, Userscripts don't have a way to define metadata where you could specify something like es6: true)
- Upgrade the JS validator to something that supports more modern (ES6 and beyond) JS syntax. Unfortunately, nothing like this exists in PHP, so you'd need to shell out to another program to do this. Introducing the ability to use a Node runtime (per T328699: Consider including a JS runtime as part of MediaWiki) could potentially help here as there are many JS validation libraries in the Node ecosystem that we could choose from.