#frontend #opensource #webdevelopment #javascript #vuejs

Easier Vue development with Vue States and Vue History

A new state management system for Vue.js, and a logging plugin on top

In today’s frontend applications, a dedicated system is often used for state management, one that not only takes logic out of the UI layer, but also offers tooling and analyzability. The problem with existing solutions like Vuex is that applications, especially large ones, can become difficult to maintain and inspect. Furthermore, distinguishing between state/getters and mutations/actions often raises even more questions.

Based on our experience with Vue/Vuex and more complex frontend applications, Johannes (Lamberts) has developed Vue States and Vue History, two new plugins that work together to overcome the complexities of state management and debugging in a new way.

Johannes offers more technical details in A New State Management for Vue.js, but in a nutshell, Vue States allows the mapping of global and local states through the Provide-Inject Pattern. This description by means of Vue components not only facilitates an easy start, it also allows seamless integration with the application. Meanwhile, Vue History can be used to automatically generate traces of all method invocations. The mapping of asynchronous processes, errors and nested calls means that even complex processes can be monitored. These two plugins are particularly useful for experienced teams building mid- to large-sized applications who are capable of assessing the implications of the Provide-Inject Pattern.

Vue States
When is Vue States useful?

Both plugins are now freely available:

All of us – especially Johannes – are looking forward to feedback from the Vue Community!

(If you want to get a live introduction to Vue States and Vue History, there may be, depending on the vote, a chance at the JSUnconf in Hamburg; if it’s a yes, then both may be presented right there.)