50. Module introduction

Welcome to the next module, Frontend CRUD with Vuex ORM. In this module, we'll be integrating our backend API data into a Vue frontend app.

Vuex ORM

To do this, we'll be using Vuex ORM, which gives us a simple, object-oriented way of managing our app data with Vuex.

Just like Mongoose allowed us to think about our MongoDB documents as models, e.g. Items, Users, and so on, well, Vuex ORM allows us to think about our client state as models. Which, as you'll see, makes things more such simple and scalable.

Here's a quick preview of what we'll be working on in this module.


We'll begin setting up Vuex ORM by creating model classes for the main entities we use in our app. Here you can see our Item model.


Next, we'll registering our models with the Vuex ORM database so they can be used in our components.

We'll also be configuring the Vuex ORM Axios plugin that will allow us to very easily query data from our API.

Loading data

Now that we've got a mechanism for loading data off our server, we'll integrate Vuex ORM into our main view components. Here you can see the Home view where we're able to easily fetch our item data and display it with the simple syntax of Vuex ORM.


The other main feature we'll be adding in this module is the shopping cart. There are a number of aspects to this, but what you can see here is a computed getter and setter that allows us to connect Vuex ORM with an input allowing the user to change item quantities in the cart.

By the end of this module we'll have neatly linked our application state to our API. That'll provide the foundation for us to add authentication, which we'll be doing in module number 6.