Repository files navigation

vue-middleware is a powerful Vuejs plugin for creating custom middleware, similar to what you find in Nuxt apps but with extra features for roles and permissions..

It helps you manage who can access which parts of your app especially when it comes to different route-based roles or permissions using a nice driver-approach making it great with integrating other backend frameworks, for more information please visit the officaldocumentation.

Out of the box it makes it super easy to handle Laravel roles and permissions without needing to set up a bunch of stuff using zero-config driver.

For live demo please visithttps://vue-middleware-demo.vercel.app.

For demo source code please visit theplayground.

Follow these steps to quickly installvue-middleware into your project, in this example we're using npm.

npm i vue-middleware

Let's create a simple middleware for protecting our dashboard.

Inmain.ts we're goning to register our firstdashboard middleware the function receives all the parameters you might think of in the authentication process.

import{createApp,App}from'vue'importvueMiddleware,{typeMiddlewareContext}from'vue-middleware'importAppfrom'./App.vue'constapp:App=createApp(App)app.use(vueMiddleware,{middleware:{dashboard:({ app, router, from, to, redirect, abort, guard}:MiddlewareContext)=>{//},},})app.mount('#app')

In vue-router routes we need to attach this middleware name in a route.

exportconstroutes=[{name:'dashboard',path:'/dashboard',component:()=>import('@/layouts/dashboard.vue'),meta:{middleware:'dashboard',// This dashboard and its children are now guarded using the dashboard middleware},children:[{name:'dashboard_home',path:'',component:()=>import('@/pages/dashboard/index.vue'),},{name:'dashboard_users',path:'users',component:()=>import('@/pages/dashboard/users.vue'),},]}]

vue-middleware is released under the MIT License.