Writing middlewares and a Vuex store with Vue CLI

If you take a look at package.json, you will see that the default dependencies that come with Vue CLI are very basic and minimal:

// package.json
"dependencies": {
  "core-js": "^2.6.5",
  "vue": "^2.6.10"
}

So, we will install our project dependencies and write the code we need in the following steps:

1. Install the following packages via npm:

$ npm i vuex
$ npm i vue-router
$ npm i vue-router-multiguard

Note that Vue does not support multiple guards per route. So, if you want to create more than one guard for a route, Vue Router Multiguard allows you to do this. For more information about this package, please visit https://github.com/atanas-dev/vue-router-multiguard.

2. Create the state, actions, and mutations to store the authenticated user details in the Vuex store so that these details can be accessed by any component:

// src/store/index.js
import Vue from 'vue...