Talk:Vue.js

Hello! Can I use npm libraries for VueJS? For example: I want to use the Vuetify. How can I add to the mediawiki it?

In general, we recommend using Codex as a UI library, rather than Vuetify or another third-party library.

However, if you're writing your own skin or extension, that skin or extension can add a ResourceLoader module that contains Vuetify, by adding it to the ResourceModules key in your extension or skin's extension.json or skin.json file. For example, the Citoid extension adds the quagga library here, after retrieving its code using a foreign-resources.yaml entry here. For more documentation on how to use foreign-resources.yaml to fetch external libraries, see ResourceLoader/Foreign resources.

Thank you for developing WVUI and the new Vue.js search experience! As a MW user, I am very excited about WVUI and keep watching the progress.

I write this post to just remind you that OOUI supports multiple themes and even a custom theme can be applied. (T100896) Of course, I have read the OOUI migration guide and know that the developers of WVUI are now focusing on needed use cases first.

I think the theme feature of OOUI is non-famous and not well used. But I am a big fan of it. I don't expect themes are implemented in WVUI soon. I want the team responsible for this to add this to the end of their long to-do list and don't forget it.

Best Regards.

Hi @Lens0021, sorry for the long-delayed answer. A lot has happened since then. Our new library Codex takes the best learnings from WVUI and others and additionally we've been thinking about themeability from the beginning. We try to get as reasonably far as possible by help of “design tokens”. Please find the original task in Phabricator and keep updated under the Codex Phabricator tag. Cheers

I heard the name Codex before, but I had not understood exactly what it means. I'm so glad to hear the themeability. Thank you.

There's nothing about Vue.js on Manual:Ajax, so I was wondering if there are any special recommendations, dos and don'ts, things to be aware of, relating to Ajax requests if your code is written in Vue.js. For instance, are both jQuery.ajax() and mediawiki.api still ready for use?

Manual:Ajax needs to be updated more generally, but for Vue.js there's no new special guidance for now. mediawiki.api can still be used in Vue code, and that's what I would recommend using when talking to api.php.

We should add some more guidance in the future around how to use Ajax in Vue code, e.g. how you should load data from Ajax into a data variable, how you should display a loading state while the data hasn't loaded yet, etc.

We used mediawiki.api in the Commons MediaSearch feature. I think that calls to mediawiki.api are good candidates for Vuex actions if you are using state management – you might need to hang onto the returned data and access it from multiple components to avoid making redundant requests, so using a store can be handy here.

This Vuex action is basically a wrapper around an mw.Api request. One consequence of doing things this way was that we ended up needing to mock mw.Api in Jest for headless unit tests (fortunately this was pretty straightforward). We are also using $.Deferred objects internally in our code for consistency with what the API client returns, though really this should all be native promises.

Many thanks for your replies and the links provided. I will happily stick to mediawiki.api for now and delve into Vuex eventually, as more use cases relevant to state management turn up (absolute beginner here). I love the MediaSearch interface!