A curated list of advanced and/or in-depth learning resources about Vue.js

A great article in which Cristi Jora shares several useful tips on how to make sure your single-page applications are blazing fast, not only on high-end devices. Those tips include: using async components, avoiding complex logic in watches, using GPU based animations and transitions. Additionally he talks about the “cost of JavaScript” and how to measure performance.

Here’s an article that covers most of the latest improvements that shipped in the Vue Devtools v5.0 beta. Those developments include the new router tab, where you can review router history as well as a list of all the routes. Also, you can now modify the store state inside the Vuex tab. Last but not least – the Performance tab, where you can now measure different aspects of your components performance like time-to-start.

If you still haven’t started to test your Vue components, here’s your chance. Sarah Dayan wrote a great tutorial to get you started with testing Vue components. It also nicely touches on the topics like: what to test and how unit testing differs from other types of tests.

Here’s a tutorial on how to build your own interactive map (based on OpenStreetMap) with Vue and D3. This includes loading tiles based on the current location and zoom factor, as well as interacting with your map through dragging. Some D3 knowledge required here.

Anthony Gore asks how well Vue fits for large-scale applications. His concerns include: no template inheritance, the “magical” nature of Vue’s reactivity and the current testing experience. What’s your opinion? Do you agree with Anthony?

Speaking of testing – here’s another article that will get teach you some good tips on how to test Vue apps. In this case – the Vue.js Hackernews clone that you might know from the Vue docs. The tests are using Jest and Vue-test-utils.

One common issue that TypeScript users have with Vuex is that it’s very hard to reach type safety. In this article, Sascha Braun shows how you can use his new library called vuex-simple for exactly that, using the dependency injection pattern. Definitely worth reading if you use TypeScript and Vuex.

Tidelift is an interesting new service that looks to connect open-source maintainers with companies that use their libraries, offering benefits for both sides. If you happen to be maintaining an open-source project, you can check whether you’re eligible for a monthly payout right now on their website.