Vuex

Dynamic Vue.js CRUD Applications

Often it seems like we build the same applications again and again. And at least sometimes it feels like that because indeed we do. Again and again, we build the same CRUD applications with their generic list views, edit forms, and previews. Throughout this article, we examine how to create a generic and reusable structure for a traditional CRUD application. Our primary goal is to keep our codebase DRY...

Read more

Decouple Vue.js components from the Vuex Store

One of the main concerns I have when building Vuex-based applications is the tight coupling of components with the Vuex store that seems inevitable when using Vuex. Ideally, I want to be able to switch the data layer of my application at any time without having to touch all my components that rely on data from an external resource...

Read more

Generic Content Vuex Modules

Today we look at how we can design a system for easily creating generic Vuex modules for typical CRUD content types. Often when creating applications rather sooner than later we catch ourselves repeating the same boilerplate code over and over again because most of our content types are very similar at their core...

Read more

Make your Vuex State Flat: State Normalization with Vuex

Listening to one of Full Stack Radio's latest episodes, I was very impressed by the expertise of Matt Biilmann, CEO of Netlify. Adam Wathan and Matt talked a lot about how global state is handled in the Netlify web application. Although the Netlify app is built with React and Redux when he spoke of his philosophy for structuring the global state of the app, it motivated me to think a little more about this topic in the context of Vue.js and Vuex...

Read more

Should I Store This Data in Vuex?

When first starting with Vuex, most people wonder what data should be stored in Vuex in the first place? In the journey of answering this question, for many people (including me) comes what I call the “Let's Store Everything in Vuex” phase. But very quickly, after having encountered the first obstacles, comes the realization, that this cannot be the be-all and end-all solution to managing state in Vue.js applications...

Read more

Route Model Binding with Vue.js and Vuex

I'm currently in the process of refreshing my knowledge about Laravel. I do so by reading the official documentation. Although, I almost exclusively work on the front side of things with Vue.js nowadays, there is a lot to be learned by getting to know techniques outside of your comfort zone...

Read more

How to Structure a Complex Vuex Store with Modules

In this article, we take a look at a possible way of how to structure a Vuex store for a large scale application. When I was researching possible approaches for handling the state of big, Vue powered applications with Vuex, it was pretty hard to find any good examples...

Read more

How to Handle Multi-row Forms with Vue, Vuex and vuex-map-fields

In one of my previous articles about form field handling in combination with Vuex, I introduced the vuex-map-fields package, which allows to conveniently map a list of fields to Vuex conform getter and setter functions. In today's article we take it a step further and we'll explore how we can use the latest release of vuex-map-fields to build a Vuex powered multi-row form...

Read more

Combining GraphQL and Vuex

In today's article, we're going to take a look at how we can combine GraphQL and Vuex to manage the state of a Vue application. But first of all let me say that the way we're going to integrate the Apollo GraphQL client into our Vue application is not the “official” way of how to integrate GraphQL into a Vue powered application...

Read more

Two-Way Data Binding with v-model and Vuex

One of the most valuable features that Vue.js has to offer, is painless two-way data binding. By using the `v-model` directive, you can quickly set up two-way data binding on form elements...

Read more