https://github.com/themustafaomar/vue-middleware

Vue middleware is a powerful Vuejs plugin for creating custom middleware and manage roles and permissions easily.
https://github.com/themustafaomar/vue-middleware

Last synced: 19 days ago
JSON representation

Vue middleware is a powerful Vuejs plugin for creating custom middleware and manage roles and permissions easily.

• Host: GitHub
• URL: https://github.com/themustafaomar/vue-middleware
• Owner: themustafaomar
• License: mit
• Created: 2024-04-26T10:48:05.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-05-10T21:11:03.000Z (about 1 month ago)
• Last Synced: 2024-05-10T22:24:12.498Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://vue-middleware-docs.vercel.app
• Size: 85.9 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue-3 - vue-middleware - A lightweight and powerful Vue3 plugin for creating custom middlewares and manage roles and permissions with zero-config. (Packages)

README

        
# vue-middleware

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 offical [documentation](https://vue-middleware-docs.vercel.app).

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.

## Demo

For live demo please visit [https://vue-middleware-demo.vercel.app](https://vue-middleware-demo.vercel.app).

For demo source code please visit the [playground](https://github.com/themustafaomar/vue-middleware/tree/main/packages/playground).

## Installation

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

```

npm i vue-middleware

```

## Quick Usage

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

In `main.ts` we're goning to register our first `dashboard` middleware the function receives all the parameters you might think of in the authentication process.

```ts

import { createApp, App } from 'vue'

import vueMiddleware, { type MiddlewareContext } from 'vue-middleware'

import App from './App.vue'

const app: 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.

```ts

export const routes = [

  {

    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'),

      },

    ]

  }

]

```

## License

vue-middleware is released under the MIT License.