If you haven’t used InertiaJS before, I’d highly recommend checking it out. It allows you to put together an app in no time at all, saves the headache of structuring an SPA if you don’t need it, and allows you to use VueJS (or other popular frontend frameworks) as your templating engine. And of course, you can actually use Vuex with InertiaJS fairly easily. We actually use InertiaJS with Vuex in Financial Freedom, our self hosted budgeting app and it works great!

There are multiple times where you need to watch pieces of data within your VueJS component. However, did you know you can watch nested component data with VueJS? Let’s say you are mapping a data to a model that looks like this:

export default {
    data(){
        return {
            form: {
                name: '',
                dob: '',
                job: ''
            }
        }
    }
}

This is a nice way to handle sending data to an API since all you have to do is pass this.form. However, what if you want to compute values when a piece of the nested data changes or if the whole form changes? Luckily VueJS makes that a breeze. Let’s run through a few examples.

Vuex is one of the most useful plugins in the entire VueJS ecosystem. I honestly include Vuex in every app whether it’s an SPA or Monolith. Using Vuex modules allows me to divide up large, dynamic and complex pages or components into maintainable, reusable, scoped components without having to pass a million props.

I’ve written a few times about Vuex modules on Server Side Up, with Using Vuex Modules Inside Components and Build a Vuex Module. Both I believe are good examples of what you can do with Vuex, I think it only scratches the surface of what Vuex is capable of. The scope of this tutorial is to introduce Vuex in a generic fashion and explain how you can fit it into your project.

Let’s dive in!

The best way to learn something or solve a problem is to break it down into the smallest pieces. While transitioning from Axios to the Fetch API and integrating it into my VueJS application, I had to start small. I actually wrote both requests side by side so I could migrate in pieces and ensure the integrity of the app. In this tutorial, we are going to be making some basic GET requests using Fetch and comparing those requests to Axios.

Creating an API wrapper using VueJS & Axios makes your API interfacing code extremely fluid, modular, and maintainable. Before we get started, those using NuxtJS should skip to the next tutorial. This will tutorial will ONLY work with VueJS and not within NuxtJS.

With that being said, so far we’ve installed Axios and got it to work with VueJS and configured Axios to work globally. We’ve also went through a few more complex requests like POST, PUT, & PATCH. In this tutorial we will abstract all of our API requests into wrapper modules. Before we get started, let’s begin with why.