docs: add documentations

Author: iodsfx3d

docs/.vuepress/config.js

@@ -13,7 +13,10 @@ module.exports = {
           title: 'Guide',
           collapsable: false,
           children: [
-            ''
+            '',
+            'installation',
+            'usage',
+            'context'
           ]
         }
       ],
@@ -24,7 +27,7 @@ module.exports = {
           children: [
             '',
             'context',
-            'options'
+            'helpers'
           ]
         }
       ]

docs/api/README.md

@@ -1,3 +1,25 @@
-# Configuration
+# Options
 
-Pass the configuration object
+These plugin options can be used to configure the plugin on registration.
+
+```javascript
+Vue.use(MiddlewarePlugin, {
+  router,
+  middleware,
+  context
+})
+```
+
+## Options Properties
+
+### `router: VueRouter`
+
+The vue router instance of your app.
+
+### `middleware?: function | Array<function>`
+
+The middleware property is used to register global middlewares, it can be set to either a single middleware function or an array of middleware functions. _(optional)_
+
+### `context?: object`
+
+This option is used to add custom properties to the default middleware context. The context object is merged with the middleware context on plugin registration. _(optional)_

docs/api/context.md

@@ -1,7 +1,5 @@
 # Context
 
-The `context` or middleware context is the only argument in all middleware functions. It's an object which provide properties which can be used to control the behaviour of a middleware
-
 ```javascript
 export default ({ app, to, from, redirect }) => {
   if (to.path === '/protected') {
@@ -19,7 +17,7 @@ The context has the following built-in properties:
 
 ### `app: VueConstructor`
 
-A regular vue constructor with injected plugin [options](options/).
+A middleware app object with injected [helpers](helpers/).
 
 ### `to: Route`
 
@@ -39,4 +37,4 @@ A function to redirect to any route. Accepts same arguments as the `next` functi
 
 ## Adding custom properties
 
-From the example above, we are appearently adding a property `visits` to the middleware context. Goto [options](options/) for more.
+In the above example, we appearently add a property `visits` to the middleware context. Goto [Helper Functions](helpers.html#functions) for more.

docs/api/helpers.md

@@ -0,0 +1,37 @@
+# Helpers
+
+These are the helper functions of the `app` object in the context.
+
+## Properties
+
+### `$MiddlewarePlugin: boolean`
+
+A flag for other plugins to identify `vue-router-middleware-plugin` is installed in the app. This will always be `true`
+
+## Functions
+
+> __Note:__ [Built-In middleware context properties](context.html#built-in-properties) cannot be mutated from theses helper functions. If a built-in property is passed in the arguments it will get overriden by the internal value.
+
+### `$getMiddlewareContext: () => object`
+
+returns the custom middleware context.
+
+```javascript
+const context = app.$getMiddlewareContext()
+```
+
+### `$setMiddlewareContext: (context: object) => object`
+
+set custom middleware context. This will overide all existing custom properties.
+
+```javascript
+const updatedContext = app.$setMiddlewareContext({ foo: 'baz' })
+```
+
+### `$updateMiddlewareContext: (key: string, value: any) => void`
+
+add or update a custom middleware context property.
+
+```javascript
+app.$updateMiddlewareContext('foo', 'baz')
+```

docs/api/options.md

@@ -1 +1 @@
-# Introduction
+# Getting Started

docs/guide/README.md

@@ -0,0 +1,15 @@
+# Context
+
+The `context` or middleware context is the only argument of a middleware function.
+
+```javascript
+export default context => {
+  const { app, to, from, redirect } = context
+
+  if (to.path === '/protected') {
+    redirect(from)
+  }
+}
+```
+
+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.

docs/guide/context.md

@@ -0,0 +1,5 @@
+# Installation
+
+```bash
+npm install --save vue-router-middleware-plugin
+```

docs/guide/installation.md

@@ -0,0 +1,79 @@
+# Usage
+
+## Concept
+
+## Types of middlewares
+
+### Global Middlewares
+
+```javascript
+Vue.use(MiddlewarePlugin, {
+  router,
+  middleware: AuthMiddleware
+})
+
+// or
+
+Vue.use(MiddlewarePlugin, {
+  router,
+  middleware: [AuthMiddleware, AnalyticsMiddleware]
+})
+```
+
+### Route Middlewares
+
+```javascript
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    meta: {
+      middleware: ({ redirect }) => {
+        redirect('/dashboard')
+      }
+    }
+  }
+```
+
+```javascript
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    meta: {
+      middleware: DashboardMiddleware
+    }
+  },
+  {
+    path: '/profile',
+    name: 'profile',
+    meta: {
+      middleware: [ProfileMiddleware, AnalyticsMiddleware]
+    }
+  },
+```
+
+```javascript
+  {
+    path: '/about',
+    name: 'about',
+    meta: {
+      middleware: {
+        ignore: [AuthMiddleware],
+        attach: [AnalyticsMiddleware]
+      }
+    }
+  },
+]
+```
+
+## Use Cases
+
+### Route Protection
+
+```javascript
+```
+
+### Long Running Tasks
+
+```javascript
+```

docs/guide/usage.md

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