add docs

Author: iodsfx3d

docs/.vuepress/config.js

@@ -13,8 +13,8 @@ module.exports = {
           title: 'Getting Started',
           collapsable: false,
           children: [
-            'installation',
-            ''
+            '',
+            'quickstart'
           ]
         },
         {

docs/guide/README.md

@@ -1,57 +1,20 @@
-# Quickstart
+# Introduction
 
-## Get Started in 3 Easy Steps
+A middleware is a block of code that will run when navigating
+from one route to another.
 
-1. Register middleware plugin in your app.
+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 elegant way of reusing
+same logic in multiple routes.
 
-    ```javascript
-    import Vue from 'vue'
-    import MiddlewarePlugin from 'vue-router-middleware-plugin'
-    import router from '@/path-to-router'
+The plugin utilizes navigation guards to implement easy to use, readable and more
+organized middlewares for your routes.
 
-    Vue.use(MiddlewarePlugin, router)
-    ```
+### Installation
 
-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'
-
-export default new VueRouter({
-  routes: [
-    {
-      path: '/',
-      meta: {
-        middleware: AuthMiddleware
-      },
-      .
-      .
-    },
-```
-
-Note: You may attach multiple middlewares to a route.
-
-```javascript
-  {
-    path: '/login',
-    meta: {
-      middleware: [LoggerMiddleware, AnalyticsMiddleware]
-    },
-    .
-    .
-  },
+```bash
+npm i -S vue-router-middleware-plugin
 ```
 
-Easy as that to get started. For advanced features continue to [configurations](configurations).
+Get started with the quickstart guide.

docs/guide/installation.md

@@ -1,4 +1,4 @@
-# Middlewares
+# Middleware
 
 A middleware is a function which accepts a [context](context) object as the only
 argument.
@@ -27,11 +27,13 @@ There are two types of middlewares:
 1. [Route Middleware](#route-middleware)
 2. [Global Middleware](#global-middleware)
 
-### Route Middleware
+## Route Middleware
 
-1. Attach a middleware to your route
+These middlewares are attached to a route inside the route object.
 
 ```javascript
+import DashboardMiddleware from '@/path-to-middleware'
+
 new VueRouter({
   routes: [
     {
@@ -45,11 +47,19 @@ new VueRouter({
 })
 ```
 
-Now the `DashboardMiddleware` is attached to route. When the user
+Now the `DashboardMiddleware` is attached to the route. When the user
 navigates to `/dashboard`, the middleware function will be resolved before entering
 the route.
 
+You can also attach multiple middlewares to a route.
+
 ```javascript
+import ProfileMiddleware from '@/path-to-middleware'
+import AnalyticsMiddleware from '@/path-to-analytics-middleware'
+
+.
+.
+
   {
     path: '/profile',
     name: 'profile',
@@ -59,7 +69,40 @@ the route.
   },
 ```
 
+## Global Middleware
+
+As the name suggests they are globally attached to all the routes of your app.
+
+```javascript
+Vue.use(MiddlewarePlugin, {
+  router,
+  middleware: AuthMiddleware
+})
+
+// or
+
+Vue.use(MiddlewarePlugin, {
+  router,
+  middleware: [AuthMiddleware, AnalyticsMiddleware]
+})
+```
+
+Now, the `AuthMiddleware` and `AnalyticsMiddleware` will be resolved before each
+route of your app.
+
+If you want, you can ignore any global middleware in any route.
+
 ```javascript
+  {
+    path: '/contact',
+    name: 'contact',
+    meta: {
+      middleware: {
+        ignore: AuthMiddleware,
+        attach: AnalyticsMiddleware
+      }
+    }
+  },
   {
     path: '/about',
     name: 'about',
@@ -73,18 +116,29 @@ the route.
 ]
 ```
 
-## Global Middleware
+Any middleware of property `igonre` will be skipped by the middleware pipeline.
+This include both global and route middlewares.
 
-```javascript
-Vue.use(MiddlewarePlugin, {
-  router,
-  middleware: AuthMiddleware
-})
+You can attach a middleware to a route using `attach`.
 
-// or
+## Middleware Pipeline
 
-Vue.use(MiddlewarePlugin, {
-  router,
-  middleware: [AuthMiddleware, AnalyticsMiddleware]
-})
+The middleware pipeline is a queue of middlewares which needs to be resolved before
+entering a route. All Middlewares will be resolved sequentially in order. For example,
+
+```javascript
+  {
+    path: '/profile',
+    name: 'profile',
+    meta: {
+      middleware: [ProfileMiddleware, AnalyticsMiddleware]
+    }
+  },
 ```
+
+In this route, `ProfileMiddleware` will be resolved before `AnalyticsMiddleware`.
+
+Global Middlewares have precendence over route middlewares i.e. they will be resolved
+sequentially in order before any route middlewares.
+
+:+1: Thank you, hope you find this plugin useful.

docs/guide/middlewares.md

@@ -0,0 +1,57 @@
+# Quickstart
+
+## Get Started in 3 Easy Steps
+
+1. Register middleware plugin in your app.
+
+    ```javascript
+    import Vue from 'vue'
+    import MiddlewarePlugin from 'vue-router-middleware-plugin'
+    import router from '@/path-to-router'
+
+    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'
+
+export default new VueRouter({
+  routes: [
+    {
+      path: '/',
+      meta: {
+        middleware: AuthMiddleware
+      },
+      .
+      .
+    },
+```
+
+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 [Advanced Guide](configurations).