First thing you have to understand is that we are not actually logging out of the application, because we were never actually logged in, we only get or remove our security JWT token. So when you remove the token you then don't have access to routes that require authentication, and then you are effectivley logged out.

In this episode I'm quickly going to show you how to logout out of your OctoberCMS, Vue and Vuex application.

Logout

Now that we got [JWT working](https://watch-learn.com/creating-rent-car-app-vue-and-october/fixing-jwt) I can show you how to handle errors that you will get from your login and registration forms. This can seem as pretty straight forward at first glance, but it's actually just a bit more complicated, because we will not get those errors in the format that is easy to display on the frontend.

So we need to take in account all possible cases and then format them to be easily handled by the frontend.

In this episode I'm going to show you how to handle login errors in our OctoberCMS, Vue and Vuex application.

Login Errors

In the [last episode](https://watch-learn.com/creating-rent-car-app-vue-and-october/persisting-state) we created a confirmation page for our checkout process. Now we are going to go into OctoberCMS, create a Reservation model, make relations with our Users and Vehicles and create a route that will create the actual reservation using PHP.

After that, in Vue, we are going to create methods that will send collected data to that route and make the reservation. We are also going to learn how to protect that route so that not just anybody can make that reservation. 

And unfortunately we are going to run into some trouble, but I will show you how to make it work anyways.

You will need [this plugin](https://github.com/octobroid/oc-api-plugin) to make everything work.

In this episode we are going to finish the checkout process and and make reservation in our OctoberCMS, Vue and Vuex application.

Making Reservation

Now we are going to create a confirmation page for our users on which we are going to be displaying all the necessary information, this will be done in the preparation for the next video in which we are going to create the actual reservation.

We are also going to learn how to automatically persist the state in our Vue and Vuex application.

In this episode we are going to continue the checkout process and learn how to automatically persist state in Vue and Vuex

Persisting State

Also we are going to create another action in our Vuex store, and use it to get a single vehicle so that we can display it in our view.

In this episode we are going to take a look at Vue Router and make detail page for our vehicles using Vue.js.

Router

For this we are first going to have to modify our select component so that it would emit selected value to the parent component. And then we will create an action in our Vuex store, that action will filter our vehicles by location. And then we will also change our Vehicle List component a bit so that we can see filtered results on the frontend.

In this episode we are going to leverage the data we created in the last episode, to filter our vehicles by location using Vue.

Filtering By Location

First we are going to go to Octobers Builder plugin to create our database, models, controllers etc. Then with a bit of PHP we are going to create our locations API endpoint. 

Then we are going to get that location data into our apps store, using Vuex of course. As you will see this is not going to go very well, so we are going to fix that situation using a bit of PHP on the API side of things.

In this episode we are going to use October CMS to create our locations API so that we can consume it with our Vue.js app.

Locations API

I'm going to show you what are the advantages of using a system like Vuex in your Vue.js app versus not using it. So firstly we are going to take a look at how state management is done by default, see what is the problem with that approach, and then we are going to take a same example and make it use Vuex for state management. Fun times! :)

In this episode we are going to take a look at Vuex, a state management library for Vue.js

Tutorials tagged with: vuex

Get in touch