update docs

Author: iodsfx3d

.markdownlintrc

@@ -0,0 +1,4 @@
+{
+  "MD036": false,
+  "MD001": false
+}

docs/guide/README.md

@@ -1,22 +1,30 @@
 # Quickstart
 
-```javascript
-import Vue from 'vue'
-import MiddlewarePlugin from 'vue-router-middleware-plugin'
-import router from '@/path-to-router'
+## Get Started in 3 Easy Steps
 
-Vue.use(MiddlewarePlugin, router)
-```
+1. Register middleware plugin in your app.
 
-```javascript
-import store from '@/path-to-store'
+    ```javascript
+    import Vue from 'vue'
+    import MiddlewarePlugin from 'vue-router-middleware-plugin'
+    import router from '@/path-to-router'
 
-export default ({ to, from, redirect }) => {
-  if (!store.getters.isLoggedIn) {
-    redirect('/login')
-  }
-}
-```
+    Vue.use(MiddlewarePlugin, router)
+    ```
+
+2. Create a middleware function.
+
+    ```javascript
+    import store from '@/path-to-store'
+
+    export default ({ to, from, redirect }) => {
+      if (!store.getters.isLoggedIn) {
+        redirect('/login')
+      }
+    }
+    ```
+
+3. Attach middleware to a route.
 
 ```javascript
 import AuthMiddleware from '@/path-to-auth-middleware'
@@ -31,16 +39,19 @@ export default new VueRouter({
       .
       .
     },
-    {
-      path: '/login',
-      meta: {
-        middleware: [LoggerMiddleware, AnalyticsMiddleware]
-      },
-      .
-      .
-    }
-  ]
-})
 ```
 
-Easy as that to get started. For advanced features continue to [configurations](/configurations).
+Note: You may attach multiple middlewares to a route.
+
+```javascript
+  {
+    path: '/login',
+    meta: {
+      middleware: [LoggerMiddleware, AnalyticsMiddleware]
+    },
+    .
+    .
+  },
+```
+
+Easy as that to get started. For advanced features continue to [configurations](configurations).

docs/guide/configurations.md

@@ -1,5 +1,67 @@
 # Configuration
 
-```bash
-npm install --save vue-router-middleware-plugin
+The plugin can be configured in multiple ways with the help of plugin options.
+
+#### 1. Simple Configuration
+
+```javascript
+import Vue from 'vue'
+import MiddlewarePlugin from 'vue-router-middleware-plugin'
+import router from '@/path-to-router'
+
+Vue.use(MiddlewarePlugin, router)
+```
+
+#### 2. Custom [Middleware Context](context)
+
+```javascript
+import Vue from 'vue'
+import MiddlewarePlugin from 'vue-router-middleware-plugin'
+import router from '@/path-to-router'
+import store from '@/path-to-store'
+
+Vue.use(MiddlewarePlugin, {
+  router,
+  context: { store }
+})
+```
+
+Now, `store` will be injected as a property in all middleware contexts.
+
+```javascript
+export default async ({ store }) => {
+  await store.dispatch('app/getData')
+}
+```
+
+#### 3. Single [Global Middleware](middlewares.html#global-middleware)
+
+```javascript
+import Vue from 'vue'
+import MiddlewarePlugin from 'vue-router-middleware-plugin'
+import router from '@/path-to-router'
+import AuthMiddleware from '@/path-to-auth-middleware'
+
+Vue.use(MiddlewarePlugin, {
+  router,
+  middleware: AuthMiddleware
+})
+```
+
+If you are wondering, it is possible to ignore a global middleware for individual
+routes.
+
+#### 4. Multiple [Global Middlewares](middlewares.html#global-middleware)
+
+```javascript
+import Vue from 'vue'
+import MiddlewarePlugin from 'vue-router-middleware-plugin'
+import router from '@/path-to-router'
+import AuthMiddleware from '@/path-to-auth-middleware'
+import LoggerMiddleware from '@/path-to-logger-middleware'
+
+Vue.use(MiddlewarePlugin, {
+  router,
+  middleware: [AuthMiddleware, LoggerMiddleware]
+})
 ```

docs/guide/context.md

@@ -14,4 +14,63 @@ export default context => {
 
 ## Custom Context
 
-It always contain a few built-in properties but can also be extended to include [custom properties](/api/context.html#adding-custom-properties) as per use case.
+The context can be extend by adding custom properties in plugin options.
+
+```javascript
+import Vue from 'vue'
+import MiddlewarePlugin from 'vue-router-middleware-plugin'
+import router from '@/path-to-router'
+import store from '@/path-to-store'
+
+Vue.use(MiddlewarePlugin, {
+  router,
+  context: { store }
+})
+```
+
+Now, `store` will be injected as a property in all middleware contexts.
+
+```javascript
+export default async ({ store }) => {
+  await store.dispatch('app/getData')
+}
+```
+
+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.
+
+### Dynamic Custom Context
+
+The custom context properties can be mutated with the helper functions exposed to
+the middleware via `app` context. The ability to mutate the custom context properties
+makes it possible to use these properties as middleware state.
+
+Initialize the state in plugin options.
+
+```javascript
+import Vue from 'vue'
+import MiddlewarePlugin from 'vue-router-middleware-plugin'
+import router from '@/path-to-router'
+
+Vue.use(MiddlewarePlugin, {
+  router,
+  context: { dashboardVisits: 0 }
+})
+```
+
+Mutate `dashboardVisits` in any middleware function.
+
+```javascript
+export default ({ app, to, dashboardVisits }) => {
+  if (to.path === '/dashboard') {
+    app.$setMiddlewareContext({ dashboardVisits: dashboardVisits + 1 })
+  }
+}
+```
+
+> You cannot mutate built-in context properties. Like `redirect`, `from` etc.
+
+Goto [API References](/api/context) to find out more about helper functions and
+`app` context.

src/install.ts

@@ -65,13 +65,13 @@ export const install: Install<Router | PluginOptions> = (
     return _context
   }
   vue.$setMiddlewareContext = (_context: any): any => {
-    const { app } = context
-    context = { ..._context, app }
+    const { app, to, from, redirect } = context
+    context = { ..._context, app, to, from, redirect }
     return context
   }
   vue.$updateMiddlewareContext = (key: string, value: any) => {
-    const { app } = context
-    context = { [key]: value, app }
+    const { app, to, from, redirect } = context
+    context = { [key]: value, app, to, from, redirect }
   }
 
   /* istanbul ignore next */