update docs

Author: iodsfx3d

docs/guide/context.md

@@ -36,10 +36,24 @@ export default async ({ store }) => {
 }
 ```
 
-In this case, you could've just imported the store in the middleware instead of
-adding it as a custom context property but it will depend on the use case and
-personal preferences of a developer. One such use case will be, if you want to carry
-state in the middleware context.
+In this case, you could've imported the store in the middleware module instead of
+adding it as a custom context property.
+
+```javascript
+import store from '@/path-to-store'
+
+export default async () => {
+  await store.dispatch('app/getData')
+}
+```
+
+If you are thinking what's the point of adding custom context. It will depend on
+the use case and personal preferences of a developer. One such case might be,
+if you are lazy and don't want to import the same module in multiple middlewares.
+
+The idea behind adding custom context was so that other plugins can leverage it
+to inject functionalities which can used inside a middleware, but there's more than
+that. With the context, you can carry state in the middleware pipeline.
 
 ### Dynamic Custom Context
 

docs/guide/installation.md

@@ -1,5 +1,18 @@
-# Installation
+# Introduction
+
+In this context, a middleware is a block of code that will run when navigating
+from one route to another.
+
+The Vue Router offers [navigation guard API](https://router.vuejs.org/guide/advanced/navigation-guards.html)
+which can be used to add control logic between your routes but they can easily make
+your route objects messy and difficult to read and there's no easy way of reusing
+same logic in multiple routes.
+
+The plugin utilizes navigation guards to implement easy to use, readable and more
+organized middlewares for your routes.
+
+### Installation
 
 ```bash
-npm install --save vue-router-middleware-plugin
+npm i -S vue-router-middleware-plugin
 ```

docs/guide/middlewares.md

@@ -1,28 +1,55 @@
 # Middlewares
 
-## Route Middleware
+A middleware is a function which accepts a [context](context) object as the only
+argument.
 
 ```javascript
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    meta: {
-      middleware: ({ redirect }) => {
-        redirect('/dashboard')
+export default ({ app, to, from, redirect }) => {
+  console.log('from:', from, ', to:', to)
+}
+```
+
+You can run a long running task in a middleware.
+
+```javascript
+import store from '@/path-to-store'
+
+export default async ({ app, to, from, redirect }) => {
+  await store.dispatch('app/aVeryLongRunningTask')
+}
+```
+
+The middleware pipeline will await for this middleware to
+be resolved before startng the execution of next middleware or route.
+
+There are two types of middlewares:
+
+1. [Route Middleware](#route-middleware)
+2. [Global Middleware](#global-middleware)
+
+### Route Middleware
+
+1. Attach a middleware to your route
+
+```javascript
+new VueRouter({
+  routes: [
+    {
+      path: '/dashboard',
+      name: 'dashboard',
+      meta: {
+        middleware: DashboardMiddleware
       }
-    }
-  }
+    },
+  ]
+})
 ```
 
+Now the `DashboardMiddleware` is attached to route. When the user
+navigates to `/dashboard`, the middleware function will be resolved before entering
+the route.
+
 ```javascript
-  {
-    path: '/dashboard',
-    name: 'dashboard',
-    meta: {
-      middleware: DashboardMiddleware
-    }
-  },
   {
     path: '/profile',
     name: 'profile',