Vue Router Middleware Plugin

A vue-router middleware pipeline (Nuxt like middlewares in Vue).

The plugin utilizes vue-router navigation guards to implement easy to use, readable and more organized middlewares for your routes.

Installation

Install using NPM

npm i -S vue-router-middleware-plugin

Install using Yarn

yarn add vue-router-middleware-plugin

Get Started in 3 Easy Steps

1. Register middleware plugin in your app.

   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.

   import store from '@/path-to-store'
   
   export default ({ to, from, redirect }) => {
     if (!store.getters.isLoggedIn) {
       redirect('/login')
     }
   }

3. Attach middleware to a route.

   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.

  {
    path: '/login',
    meta: {
      middleware: [LoggerMiddleware, AnalyticsMiddleware]
    },
    .
    .
  },

Easy as that to get started.

👀 For advanced features like global middlewares and middleware context continue to Documentations.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT